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

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

    const employee_store = useEmployeeStore();
    const current_step = ref<'form' | 'access'>('form');
    const transition_in_animation = ref('fadeInRight');
    const transition_out_animation = ref('fadeOutLeft');

    const getNextMenu = (animation_in: string, animation_out: string, next_step: 'form' | 'access') => {
        transition_in_animation.value = animation_in;
        transition_out_animation.value = animation_out;
        current_step.value = next_step;
    };
</script>

<template>
    <q-dialog
        v-model="employee_store.is_add_modify_dialog_open"
        full-width
        @beforeShow="current_step = 'form'"
    >
        <q-card
            class="bg-secondary rounded-10"
            :class="$q.dark.isActive ? 'shadow-24' : 'shadow-10'"
            :style="($q.screen.lt.md ? ' ' : 'max-width: 70vw !important; height: 50vh') +
                ($q.dark.isActive ? 'border: 2px solid var(--q-accent)' : '')"
        >
            <q-card-section class="row text-weight-bolder text-white text-h5 bg-primary flex-center shadow-5 q-pa-none">
                <div class="q-py-sm text-uppercase">
                    {{ $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>
                <q-slide-transition>
                    <div
                        v-if="current_step === 'access'"
                        class="col-12 row flex-center q-px-sm q-py-xs bg-accent"
                    >
                        <q-icon
                            name="info_outline"
                            color="white"
                            size="sm"
                            class="self-end q-mr-sm"
                        />

                        <q-item-label
                            caption
                            class="text-white text-weight-medium"
                        >{{ $t('employee_management.module_access.usage_description') }}</q-item-label>
                    </div>
                </q-slide-transition>
            </q-card-section>

            <q-card-section class="q-pt-sm">
                <div class="full-height column">
                    <div class="col">
                        <transition
                            :enter-active-class="'animated ' + transition_in_animation"
                            :leave-active-class="'animated ' + transition_out_animation"
                            mode="out-in"
                        >
                            <div
                                v-if="current_step === 'form'"
                                class="rounded-5 q-pb-sm bg-dark shadow-10"
                            >
                                <AddModifyDialogForm />
                            </div>
    
                            <AddModifyDialogAccess v-else />
                        </transition>
                    </div>



                    <div class="row col-auto">
                        <q-btn
                            v-if="current_step === 'access'"
                            flat
                            size="lg"
                            color="accent"
                            icon="arrow_back"
                            :label="$t('employee_management.details_label')"
                            @click="getNextMenu('fadeInLeft', 'fadeOutRight', 'form')"
                        />

                        <q-space />

                        <q-btn
                            v-if="current_step === 'form'"
                            flat
                            size="lg"
                            color="accent"
                            icon-right="arrow_forward"
                            :label="$t('employee_management.access_label')"
                            @click="getNextMenu('fadeInRight', 'fadeOutLeft', 'access')"
                        />
                    </div>
                </div>
            </q-card-section>

            <q-inner-loading :showing="employee_store.is_loading" />
        </q-card>
    </q-dialog>
</template>