<script
    setup
    lang="ts"
>
    import MenuPanelPersonal from 'src/modules/profile/components/employee/menu-panel-personal.vue';
    import MenuPanelEmployee from 'src/modules/profile/components/employee/menu-panel-employee.vue';
    import MenuPanelPreferences from 'src/modules/profile/components/shared/menu-panel-preferences.vue';
    import MenuPanelSchedulePresets from 'src/modules/profile/components/shared/menu-panel-schedule-presets.vue';
    import MenuTemplate from 'src/modules/profile/components/shared/menu-template.vue';
    import { default_employee_profile, type EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';
    import { useAuthStore } from 'src/stores/auth-store';

    const auth_store = useAuthStore();

    const PanelNames = {
        PERSONAL_INFO: 'personal_info',
        EMPLOYEE_INFO: 'employee_info',
        PREFERENCES: 'references',
        SCHEDULE_PRESETS: 'schedule_presets',
    };

    const employee_profile = defineModel<EmployeeProfile>({ default: default_employee_profile });
</script>


<template>
    <q-card
        flat
        class="rounded-5 bg-transparent q-pa-none"
    >
        <MenuTemplate
            :first-name="employee_profile.first_name === '' ? auth_store.user?.first_name ?? '' : employee_profile.first_name"
            :last-name="employee_profile.last_name === '' ? auth_store.user?.last_name ?? '' : employee_profile.last_name"
            :initial-menu="PanelNames.PERSONAL_INFO"
        >
            <template #tabs>
                <q-tab
                    :name='PanelNames.PERSONAL_INFO'
                    icon='person_outline'
                    :label="$q.screen.lt.md ? '' : $t('profile.personal.tab_title')"
                />
                <q-tab
                    :name="PanelNames.EMPLOYEE_INFO"
                    icon="work_outline"
                    :label="$q.screen.lt.md ? '' : $t('profile.employee.tab_title')"
                />
                <q-tab
                    :name="PanelNames.PREFERENCES"
                    icon="display_settings"
                    :label="$q.screen.lt.md ? '' : $t('profile.preferences.tab_title')"
                />
                <q-tab
                    :name="PanelNames.SCHEDULE_PRESETS"
                    icon="list_alt"
                    :label="$q.screen.lt.md ? '' : $t('profile.schedule_presets.tab_title')"
                />
            </template>

            <template #panels>
                <q-tab-panel
                    :name="PanelNames.PERSONAL_INFO"
                    class="q-pa-none"
                >
                    <MenuPanelPersonal v-model="employee_profile" />
                </q-tab-panel>

                <q-tab-panel
                    :name="PanelNames.EMPLOYEE_INFO"
                    class="q-pa-none"
                >
                    <MenuPanelEmployee v-model="employee_profile" />
                </q-tab-panel>

                <q-tab-panel
                    :name="PanelNames.PREFERENCES"
                    class="q-pa-none"
                >
                    <MenuPanelPreferences />
                </q-tab-panel>
                <q-tab-panel
                    :name="PanelNames.SCHEDULE_PRESETS"
                    class="q-pa-none"
                >
                    <MenuPanelSchedulePresets />
                </q-tab-panel>
            </template>
        </MenuTemplate>
    </q-card>
</template>