<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import ZoneEventsPanel from './ZoneEventsPanel.vue';
import ZoneCalendarGrid from '../ZoneCalendarGrid.vue';
import ZoneEventInclusionForm from './ZoneEventInclusionForm.vue';
import ZoneEventExclusionForm from './ZoneEventExclusionForm.vue';

import { useStateStore } from 'stores/useStateStore';
import { reactive } from 'vue';

const { t } = useI18n();
const stateStore = useStateStore();

const firstDay = ref();
const lastDay = ref();

const events = ref([]);
const formModeName = ref('include');
const showZoneEventForm = ref(false);
const zoneEventsFormProps = reactive({
    isNewMode: true,
    date: null,
});

const openForm = (data, isBtnAdd) => {
    const { date = null, isNewMode, event, eventType, geoIds = [] } = data;
    zoneEventsFormProps.date = date;
    zoneEventsFormProps.isNewMode = isNewMode;
    zoneEventsFormProps.event = event;
    zoneEventsFormProps.eventType = eventType;
    if (geoIds.length) zoneEventsFormProps.geoIds = geoIds;
    if (isBtnAdd) formModeName.value = 'include';

    showZoneEventForm.value = true;
};

const onZoneEventFormClose = () => {
    showZoneEventForm.value = false;
    zoneEventsFormProps.value = {};
};
</script>

<template>
    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
        <ZoneEventsPanel
            :first-day="firstDay"
            :last-day="lastDay"
            :events="events"
            v-model:formModeName="formModeName"
        />
    </Teleport>
    <QPage class="q-pa-md flex justify-center">
        <ZoneCalendarGrid
            v-model:events="events"
            v-model:firstDay="firstDay"
            v-model:lastDay="lastDay"
            data-key="ZoneEvents"
            @on-date-selected="openForm"
        />
        <QDialog v-model="showZoneEventForm" @hide="onZoneEventFormClose()">
            <ZoneEventInclusionForm
                v-if="!formModeName || formModeName === 'include'"
                v-bind="zoneEventsFormProps"
                @close-form="onZoneEventFormClose()"
            />
            <ZoneEventExclusionForm
                v-else
                v-bind="zoneEventsFormProps"
                @close-form="onZoneEventFormClose()"
            />
        </QDialog>
        <QPageSticky :offset="[20, 20]">
            <QBtn
                @click="
                    openForm(
                        {
                            isNewMode: true,
                        },
                        true,
                    )
                "
                color="primary"
                fab
                icon="add"
                v-shortcut="'+'"
            />
            <QTooltip class="text-no-wrap">
                {{ t('eventsInclusionForm.addEvent') }}
            </QTooltip>
        </QPageSticky>
    </QPage>
</template>
