<script
    setup
    lang="ts"
>
    import MenuPanelInputField from 'src/modules/profile/components/shared/menu-panel-input-field.vue';

    import { ref } from 'vue';
    import { deepEqual } from 'src/utils/deep-equal';
    import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
    import { useEmployeeStore } from 'src/stores/employee-store';
    import type { EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';

    const employee_store = useEmployeeStore();
    const is_editing = ref<boolean>(false);
    const initial_info = ref<EmployeeProfile>(unwrapAndClone(employee_store.employee));

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

        is_editing.value = false;
        initial_info.value = unwrapAndClone(employee_store.employee);   // update initial value for future possible resets

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

    const onReset = () => {
        employee_store.employee = unwrapAndClone(initial_info.value);
        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'">
            <MenuPanelInputField
                v-model="employee_store.employee.first_name"
                type="text"
                class="col"
                :is-editing="is_editing"
                :label-string="$t('profile.personal.first_name')"
            />
            <MenuPanelInputField
                v-model="employee_store.employee.last_name"
                class="col"
                type="text"
                :is-editing="is_editing"
                :label-string="$t('profile.personal.last_name')"
            />
        </div>

        <div :class="$q.screen.lt.md ? 'column' : 'row'">
            <MenuPanelInputField
                v-model="employee_store.employee.phone_number"
                class="col"
                type="text"
                :is-editing="is_editing"
                :label-string="$t('profile.personal.phone_number')"
            />
            <MenuPanelInputField
                v-model="employee_store.employee.birth_date"
                class="col"
                mask="#### / ## / ##"
                hint="ex: 1970 / 01 / 01"
                :is-editing="is_editing"
                :label-string="$t('profile.personal.birthdate')"
            />
        </div>

        <div :class="$q.screen.lt.md ? 'column' : 'row'">
            <MenuPanelInputField
                v-model="employee_store.employee.residence"
                class="col"
                :is-editing="is_editing"
                :label-string="$t('profile.personal.address')"
                :hint="$t('profile.personal.address_hint')"
            />
        </div>

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