<script setup lang="ts">
    import { ref } from 'vue';
    import { deepEqual } from 'src/utils/deep-equal';
    import ProfileInputField from 'src/modules/profile/components/shared/profile-panel-input-field.vue';
    import ProfileSelectField from 'src/modules/profile/components/shared/profile-panel-select-field.vue';
    import { type EmployeeProfile } from 'src/modules/employee-list/types/employee-profile-interface';

    const { employeeProfile } = defineProps<{
        employeeProfile: EmployeeProfile;
    }>();

    let initial_info: EmployeeProfile = employeeProfile;
    let employee_form_data = ref<EmployeeProfile>({ ...employeeProfile });
    const is_editing = ref<boolean>(false);
    
    const supervisor_options = [{ label: 'AAA', value: '1' }, { label: 'BBB', value: '2' }, { label: 'CCC', value: '3' }, { label: 'DDD', value: '4' }];

     const onSubmit = () => {
        if (!is_editing.value) {
            is_editing.value = true;
            return;
        }

        is_editing.value = false;  
        initial_info = { ...employee_form_data.value };   // update initial value for future possible resets

        if (!deepEqual(employee_form_data, initial_info)) {
            // save the new data here
            return;
        }
    };

    const onReset = () => {
        employee_form_data = ref<EmployeeProfile>(initial_info);
        is_editing.value = false;
    }
</script>

<template>
    <q-form 
        class="q-pa-md full-height"
        @submit="onSubmit"
        @reset="onReset"
    >
        <div :class="$q.screen.lt.md ? 'column' : 'row'">
            <ProfileInputField
                v-model="employee_form_data.job_title"
                class="col"
                :is-editing="is_editing"
                :label-string="$t('profile.employee.job_title')"
            />
            <ProfileInputField
                v-model="employee_form_data.company_name"
                class="col"
                :is-editing="is_editing"
                :label-string="$t('profile.employee.company')"
            />
        </div>

        <div class="q-mx-xs">
            <ProfileSelectField 
                v-model="employee_form_data.supervisor_full_name"
                :options="supervisor_options"
                :label-string="$t('profile.employee.supervisor')"
                :is-editing="is_editing"
            />
        </div>


        <div :class="$q.screen.lt.md ? 'column' : 'row'">
            <ProfileInputField
                v-model="employee_form_data.email"
                class="col"
                :is-editing="is_editing"
                :label-string="$t('profile.employee.email')"
            />
            <ProfileInputField
                v-model="employee_form_data.first_work_day"
                readonly
                class="col"
                type="date"
                :is-editing="is_editing"
                :label-string="$t('profile.employee.hired_date')"
            />
        </div>

        <div class="absolute-bottom" :class="$q.screen.lt.md ? 'column' : 'row'">
            <q-space />
            <q-btn
                v-if="is_editing"
                push
                size="sm"
                color="negative"
                type="reset"
                icon="cancel"
                class="q-ma-sm"
                :label="$t('shared.label.cancel')"
            />
            <q-btn
                push
                size="sm"
                color="primary"
                :icon="is_editing ? 'save_alt' : 'create'"
                class="q-ma-sm"
                :label="is_editing ? $t('shared.label.save') : $t('shared.label.update')"
            />
        </div>
    </q-form>
</template>