<script
    setup
    lang="ts"
>
    import AddModifyDialogForm from 'src/modules/employee-list/components/add-modify-dialog-form.vue';
    import AddModifyDialogAccess from 'src/modules/employee-list/components/add-modify-dialog-access.vue';
    import AddModifyDialogSchedule from 'src/modules/employee-list/components/add-modify-dialog-schedule.vue';

    import { ref } from 'vue';
    import { useEmployeeStore } from 'src/stores/employee-store';

    // ========== state ========================================

    const employee_store = useEmployeeStore();
    const current_step = ref<'form' | 'access' | 'schedule'>('form');
    const initial_employee_details = ref('');
    const is_showing_close_confirm = ref(false);

    // ========== methods ========================================

    const onBeforeHide = () => {
        const current_employee_details = JSON.stringify(employee_store.employee);
        
        if (initial_employee_details.value !== current_employee_details)
            is_showing_close_confirm.value = true;
        else
            employee_store.is_add_modify_dialog_open = false;
    };

    const onBeforeShow = () => {
        current_step.value = 'form';
        initial_employee_details.value = JSON.stringify(employee_store.employee);
    };

    const onClickSaveChanges = async () => {
        const success = await employee_store.createOrUpdateEmployee(employee_store.employee);

        if (success) 
            closeAllDialogs();
    }

    const closeAllDialogs = () => {
        is_showing_close_confirm.value = false;
        employee_store.is_add_modify_dialog_open = false;
    }
</script>

<template>
    <q-dialog
        :model-value="employee_store.is_add_modify_dialog_open"
        full-width
        full-height
        backdrop-filter="blur(4px)"
        class="shadow-24"
        @beforeShow="onBeforeShow"
        @update:model-value="onBeforeHide"
    >
        <div
            class="column bg-secondary rounded-10 no-wrap"
            :class="$q.dark.isActive ? 'shadow-24' : 'shadow-10'"
            :style="($q.screen.lt.md ? ' ' : 'max-width: 60vw !important; max-height: 80vh !important;') +
                ($q.dark.isActive ? 'border: 2px solid var(--q-accent)' : '')"
        >
            <div class="row col-auto text-white bg-primary flex-center shadow-5">
                <div class="q-py-sm text-uppercase text-weight-bolder text-h5 ">
                    {{ $t('employee_management.' + employee_store.management_mode) }}
                </div>

                <div
                    v-if="employee_store.employee.first_name.length > 0"
                    class="text-uppercase text-weight-light text-h6 q-ml-sm"
                >
                    {{ `${employee_store.employee.first_name} ${employee_store.employee.last_name}` }}
                </div>
            </div>


            <div class="col column q-pa-md no-wrap scroll">
                <q-tabs
                    v-model="current_step"
                    dense
                    inline-label
                    align="justify"
                    indicator-color="transparent"
                    active-class="text-white bg-accent"
                    class="q-mb-sm"
                >
                    <q-tab
                        name="form"
                        icon="las la-id-card"
                        :label="$q.screen.lt.sm ? '' : $t('employee_management.details_label')"
                        class="rounded-25 q-ma-xs bg-dark"
                        style="border: 2px solid var(--q-accent);"
                    />
                    <q-tab
                        name="access"
                        icon="las la-key"
                        :label="$q.screen.lt.sm ? '' : $t('employee_management.access_label')"
                        class="rounded-25 q-ma-xs bg-dark"
                        style="border: 2px solid var(--q-accent);"
                    />
                    <q-tab
                        name="schedule"
                        icon="calendar_month"
                        :label="$q.screen.lt.sm ? '' : $t('employee_management.schedule_label')"
                        class="rounded-25 q-ma-xs bg-dark"
                        style="border: 2px solid var(--q-accent);"
                    />
                </q-tabs>

                <q-tab-panels
                    v-model="current_step"
                    animated
                    :transition-prev="$q.screen.lt.sm ? 'jump-down' : 'jump-right'"
                    :transition-next="$q.screen.lt.sm ? 'jump-up' : 'jump-left'"
                    class="bg-transparent full-height"
                >
                    <q-tab-panel
                        name="form"
                        class="q-pa-xs"
                    >
                        <AddModifyDialogForm />
                    </q-tab-panel>

                    <q-tab-panel
                        name="access"
                        class="q-pa-xs"
                    >
                        <AddModifyDialogAccess />
                    </q-tab-panel>

                    <q-tab-panel
                        name="schedule"
                        class="q-pa-xs"
                    >
                        <AddModifyDialogSchedule />
                    </q-tab-panel>
                </q-tab-panels>
            </div>

            <q-btn
                square
                color="accent"
                :label="employee_store.management_mode === 'add_employee' ? $t('shared.label.save') : $t('shared.label.update')"
                class="col-auto q-py-sm shadow-up-5"
                @click="onClickSaveChanges"
            />
        </div>

        <!-- dialog to confirm if you want to save changes -->
        <q-dialog
            v-model="is_showing_close_confirm"
            persistent
            backdrop-filter="blur(4px)"
        >
            <q-card class="q-pa-md shadow-24">
                <span class="text-uppercase text-weight-light text-h6">{{ $t('employee_management.save_changes_notification') }}</span>

                <div class="row full-width">
                    <q-btn
                        flat
                        dense
                        size="lg"
                        :label="$t('shared.label.cancel')"
                        class="col"
                        @click="is_showing_close_confirm = false"
                    />

                    <q-btn
                        flat
                        dense
                        size="lg"
                        color="negative"
                        :label="$t('shared.misc.no')"
                        class="col"
                        @click="closeAllDialogs"
                    />

                    <q-btn
                        flat
                        dense
                        size="lg"
                        color="accent"
                        :label="$t('shared.misc.yes')"
                        class="col"
                        @click="onClickSaveChanges"
                    />
                </div>
            </q-card>
        </q-dialog>
    </q-dialog>
</template>