<script setup lang="ts">
    import PanelInfoPersonal from 'src/modules/profile/components/employee/profile-panel-info-personal.vue';
    import PanelInfoEmployee from 'src/modules/profile/components/employee/profile-panel-info-employee.vue';
    import PanelPreferences from 'src/modules/profile/components/shared/profile-panel-preferences.vue';
    import ProfileTabMenuTemplate from 'src/modules/profile/components/shared/profile-tab-menu-template.vue';
    import { default_employee_profile, type EmployeeProfile } from 'src/modules/employee-list/types/employee-profile-interface';

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

    const { employeeProfile = default_employee_profile } = defineProps<{
        employeeProfile?: EmployeeProfile | undefined;
    }>();
</script>


<template>
    <q-card flat class="rounded-5 bg-transparent q-pa-none">
        <ProfileTabMenuTemplate
            :first-name="employeeProfile.first_name"  
            :last-name="employeeProfile.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')"
                />
            </template>

            <template #panels>
                <q-tab-panel :name="PanelNames.PERSONAL_INFO" class="q-pa-none">
                    <PanelInfoPersonal :employee-profile="employeeProfile" />
                </q-tab-panel>

                <q-tab-panel :name="PanelNames.EMPLOYEE_INFO" class="q-pa-none">
                    <PanelInfoEmployee :employee-profile="employeeProfile" />
                </q-tab-panel>

                <q-tab-panel :name="PanelNames.PREFERENCES" class="q-pa-none">
                    <PanelPreferences />
                </q-tab-panel>
            </template>
        </ProfileTabMenuTemplate>
    </q-card>
</template>