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

    const props = withDefaults( defineProps<{
        employeeInfo?: EmployeeJobInfo;
    }>(), {
        employeeInfo: () => default_employee_job_info,
    });

    const initial_info = props.employeeInfo;

    const job_info = ref<EmployeeJobInfo>(props.employeeInfo);
    const is_editing = ref<boolean>(false);

    const onSubmit = () => {
        if (!deepEqual(job_info.value, initial_info)) {
            // saving profile logic here
            console.log('Changes saved!');
        }
        console.log('Nothing was changed...');
    };

    const onReset = () => {
        job_info.value = 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
                class="col"
                :model-reference="job_info.company"
                :is-editing="is_editing"
                :label-string="$t('profilePage.employeeInfo.firstName')"
            />
            <ProfileInputField
                class="col"
                :model-reference="job_info.email"
                :is-editing="is_editing"
                :label-string="$t('profilePage.employeeInfo.lastName')"
            />
        </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('timesheet.cancel_button')"
            />
            <q-btn
                push
                size="sm"
                color="primary"
                :icon="is_editing ? 'save_alt' : 'create'"
                class="q-ma-sm"
                :label="is_editing ? $t('timesheet.saveButton') : $t('shiftsTemplate.updateButton')"
                @click="is_editing = !is_editing"
            />
        </div>
    </q-form>
</template>