<script setup>
import { ref, onUnmounted } 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) => {
    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;

    showZoneEventForm.value = true;
};

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

onUnmounted(() => (stateStore.rightDrawer = false));
</script>

<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#actions-append">
            <div class="row q-gutter-x-sm">
                <QBtn
                    flat
                    @click="stateStore.toggleRightDrawer()"
                    round
                    dense
                    icon="dock_to_left"
                >
                    <QTooltip bottom anchor="bottom right">
                        {{ t('globals.collapseMenu') }}
                    </QTooltip>
                </QBtn>
            </div>
        </Teleport>
    </template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <ZoneEventsPanel
                :first-day="firstDay"
                :last-day="lastDay"
                :events="events"
                v-model:formModeName="formModeName"
                @open-zone-form="openForm"
            />
        </QScrollArea>
    </QDrawer>
    <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 === '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,
                    })
                "
                color="primary"
                fab
                icon="add"
                shortcut="+"
            />
            <QTooltip class="text-no-wrap">
                {{ t('eventsInclusionForm.addEvent') }}
            </QTooltip>
        </QPageSticky>
    </QPage>
</template>
