<script
    setup
    lang="ts"
>
    import AddModifyDialogFormInput from 'src/modules/employee-list/components/add-modify-dialog-form-input.vue';
    import AddModifyDialogFormSelect from 'src/modules/employee-list/components/add-modify-dialog-form-select.vue';

    import { ref, computed } from 'vue';
    import { useEmployeeStore } from 'src/stores/employee-store';
    import { type QuasarRules, useEmployeeProfileRules, company_options } from 'src/modules/employee-list/employee-list-utils';

    const employee_store = useEmployeeStore();
    const last_work_day = computed(() => employee_store.employee.last_work_day ?? '---');
    const is_first_day_picker_open = ref(false);
    const is_last_day_picker_open = ref(false);

    const form_rules = useEmployeeProfileRules();

    const supervisor_options = computed(() => {
        const supervisors = employee_store.employee_list.filter(employee => employee.is_supervisor === true && employee.last_work_day === null);
        return supervisors.map(supervisor => supervisor.first_name + ' ' + supervisor.last_name);
    })

    const setLastWorkDay = (date: string | number | null | undefined) => {
        if (typeof date === 'string' && date.length > 0) {
            employee_store.employee.last_work_day = date;
        }
        employee_store.employee.last_work_day = null;
    }
</script>

<template>
    <div>
        <q-form>
            <div class="row flex-center">
                <transition
                    enter-active-class="animated pulse fast"
                    mode="out-in"
                >
                    <q-checkbox
                        v-model="employee_store.employee.is_supervisor"
                        :key="employee_store.employee.is_supervisor ? '1' : '0'"
                        dense
                        left-label
                        :label="$t('employee_list.table.is_supervisor')"
                        size="lg"
                        color="accent"
                        class="col-auto text-uppercase q-py-xs q-px-lg q-ma-xs rounded-25"
                        :class="employee_store.employee.is_supervisor ? 'bg-accent text-white text-weight-bold' : ''"
                    />
                </transition>
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.sm ? 'column' : 'row'"
            >
                <AddModifyDialogFormInput
                    v-model="employee_store.employee.first_name"
                    :label="$t('profile.personal.first_name')"
                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.first_name_required'))]"
                />

                <AddModifyDialogFormInput
                    v-model="employee_store.employee.last_name"
                    :label="$t('profile.personal.last_name')"
                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.last_name_required'))]"
                />
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.sm ? 'column' : 'row'"
            >
                <AddModifyDialogFormInput
                    v-model="employee_store.employee.email"
                    :label="$t('profile.employee.email')"
                />

                <AddModifyDialogFormInput
                    v-model="employee_store.employee.phone_number"
                    :label="$t('profile.personal.phone_number')"
                    mask="(###) ### - ####"
                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.phone_number_required'))]"
                />
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.sm ? 'column' : 'row'"
            >
                <AddModifyDialogFormInput
                    v-model="employee_store.employee.job_title"
                    :label="$t('profile.employee.job_title')"
                />

                <AddModifyDialogFormSelect
                    v-model="employee_store.employee.company_name"
                    :options="company_options"
                    :label="$t('profile.employee.company')"
                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.company_required'))]"
                />
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.sm ? 'column' : 'row'"
            >
                <AddModifyDialogFormSelect
                    v-model="employee_store.employee.supervisor_full_name"
                    :options="supervisor_options"
                    :label="$t('profile.employee.supervisor')"
                />

                <AddModifyDialogFormInput
                    v-model="employee_store.employee.external_payroll_id"
                    :label="$t('profile.employee.bankroll_id')"
                    :placeholder="$t('employee_management.can_be_entered_later')"
                />
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.sm ? 'column' : 'row'"
            >
                <AddModifyDialogFormInput
                    v-model="employee_store.employee.daily_expected_hours"
                    :label="$t('employee_list.table.expected_daily_hours')"
                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.daily_hours_required'))]"
                    type="number"
                />

                <AddModifyDialogFormInput
                    v-if="employee_store.employee.paid_time_off"
                    v-model="employee_store.employee.paid_time_off.banked_hours"
                    :label="$t('employee_management.banked_hours')"
                    type="number"
                />

                <div
                    v-else
                    class="col q-px-sm"
                ></div>
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.sm ? 'column' : 'row'"
            >
                <AddModifyDialogFormInput
                    v-if="employee_store.employee.paid_time_off"
                    v-model="employee_store.employee.paid_time_off.sick_hours"
                    :label="$t('employee_management.sick_hours')"
                    type="number"
                    @update:model-value="employee_store.employee.paid_time_off.last_updated = new Date().toISOString().slice(0, 10)"
                />

                <AddModifyDialogFormInput
                    v-if="employee_store.employee.paid_time_off"
                    v-model="employee_store.employee.paid_time_off.vacation_hours"
                    :label="$t('employee_management.vacation_hours')"
                    type="number"
                />
            </div>

            <div
                class="q-ma-xs"
                :class="$q.screen.lt.md ? 'column' : 'row'"
            >
                <AddModifyDialogFormInput
                    v-model="employee_store.employee.first_work_day"
                    v-model:is-date-picker-open="is_first_day_picker_open"
                    reqires-date-picker
                    :label="$t('profile.employee.hired_date')"
                    :rules="[(value: string, rules: QuasarRules) => form_rules.isNotEmpty(value, rules, $t('employee_list.errors.hire_date_required'))]"
                    mask="####-##-##"
                />

                <AddModifyDialogFormInput
                    v-model="last_work_day"
                    v-model:is-date-picker-open="is_last_day_picker_open"
                    reqires-date-picker
                    :label="$t('profile.employee.fired_date')"
                    mask="####-##-##"
                    @update:model-value="setLastWorkDay"
                />
            </div>
        </q-form>
    </div>
</template>

<style scoped>
:deep(.q-field--error .q-field__bottom) {
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 0 0 5px 5px;
    padding-top: 0;
    align-items: center;
    background-color: var(--q-negative);
}

:deep(.row > .col) {
    height: fit-content;
}

:deep(.q-field--outlined.q-field--highlighted .q-field__control::after) {
    border-radius: 5px 5px 0 0;
}
</style>