<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import axios from 'axios';
import FetchData from 'components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import CrudModel from 'components/CrudModel.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import { useQuasar } from 'quasar';
import VnConfirm from 'components/ui/VnConfirm.vue';
import useNotify from 'src/composables/useNotify.js';
const { notify } = useNotify();
const route = useRoute();
const { t } = useI18n();
const disabilityGradesOptions = ref();
const workerPitCrudRef = ref({});
const insertTag = () => {
    workerPitCrudRef.value.insert();
};
const quasar = useQuasar();

const deleteRelative = async (id) => {
    await new Promise((resolve) => {
        quasar
            .dialog({
                component: VnConfirm,
                componentProps: {
                    title: t('Remove Relative'),
                    message: t('Do you want to remove this relative?'),
                },
            })
            .onOk(() => {
                resolve(true);
            })
            .onCancel(() => {
                resolve(false);
            });
    });
    await axios.delete(`WorkerRelatives/${id}`);
    workerPitCrudRef.value.reload();
    notify('Relative removed', 'positive');
};
</script>

<template>
    <FetchData
        url="DisabilityGrades"
        @on-fetch="(data) => (disabilityGradesOptions = data)"
        auto-load
    />

    <FormModel
        url="WorkerIrpfs"
        :filter="{ where: { workerFk: route.params.id } }"
        auto-load
        data-key="workerIrpfs"
        :max-width="false"
    >
        <template #form="{ data }">
            <QCard class="q-px-lg q-py-lg">
                <VnRow>
                    <VnInput
                        :label="t('familySituation')"
                        clearable
                        v-model="data.familySituation"
                        data-cy="familySituation"
                    />
                    <VnInput
                        :label="t('spouseNif')"
                        clearable
                        v-model="data.spouseNif"
                        data-cy="spouseNif"
                    />
                </VnRow>
                <VnRow>
                    <VnSelect
                        :label="t('disabilityGrades')"
                        :options="disabilityGradesOptions"
                        option-label="description"
                        option-value="id"
                        v-model="data.disabilityGradeFk"
                        id="disabilityGrades"
                        data-cy="disabilityGrades"
                        hide-selected
                    />

                    <VnInputDate
                        :label="t('geographicMobilityDate')"
                        v-model="data.geographicMobilityDate"
                    />
                </VnRow>
                <VnRow>
                    <VnInput
                        clearable
                        v-model="data.childPension"
                        :label="t(`childPension`)"
                        data-cy="childPension"
                    />
                    <VnInput
                        clearable
                        v-model="data.spousePension"
                        :label="t(`spousePension`)"
                        data-cy="spousePension"
                    />
                </VnRow>
                <VnRow wrap>
                    <QCheckbox
                        clearable
                        v-model="data.isDependend"
                        :label="t(`isDependend`)"
                    />
                    <QCheckbox
                        v-model="data.hasHousingPaymentBefore"
                        :label="t(`hasHousingPaymentBefore`)"
                    />
                </VnRow>
                <VnRow>
                    <QCheckbox
                        v-model="data.hasHousingPaymentAfter"
                        :label="t(`hasHousingPaymentAfter`)"
                    />
                    <QCheckbox
                        v-model="data.hasExtendedWorking"
                        :label="t(`hasExtendedWorking`)"
                    />
                </VnRow>
            </QCard>

            <CrudModel
                ref="workerPitCrudRef"
                data-key="workerPit"
                url="WorkerRelatives"
                auto-load
                :filter="{
                    where: { workerFk: route.params.id },
                }"
                :data-required="{
                    workerFk: route.params.id,
                    isJointCustody: false,
                    isDependend: false,
                }"
                :has-sub-toolbar="false"
            >
                <template #body="{ rows }">
                    <QCard class="q-px-lg q-py-lg" flat>
                        <div class="row no-wrap justify-between q-pb-md">
                            <VnTitle :text="t('Relatives')" />
                            <QBtnGroup push style="column-gap: 10px">
                                <QBtn
                                    color="primary"
                                    icon="restart_alt"
                                    flat
                                    @click="workerPitCrudRef.reset"
                                    :disable="!workerPitCrudRef.hasChanges"
                                    :title="t('globals.reset')"
                                />
                                <QBtn
                                    ref="saveButtonRef"
                                    color="primary"
                                    icon="save"
                                    @click="workerPitCrudRef.onSubmit"
                                    :disable="!workerPitCrudRef.hasChanges"
                                    :title="t('globals.save')"
                                    data-cy="workerPitRelativeSaveBtn"
                                />
                            </QBtnGroup>
                        </div>
                        <div
                            v-for="(row, index) in rows"
                            :key="index"
                            class="row no-wrap q-mb-lg q-gutter-lg"
                            padding="none"
                        >
                            <VnSelect
                                :options="[
                                    { id: 0, name: 'Ascendiente' },
                                    { id: 1, name: 'Descendiente' },
                                ]"
                                :label="t('isDescendant')"
                                v-model="row.isDescendant"
                                class="q-gutter-xs q-mb-xs"
                                data-cy="Descendant/Ascendant"
                            />
                            <VnSelect
                                :label="t('disabilityGrades')"
                                :options="disabilityGradesOptions"
                                option-label="description"
                                option-value="id"
                                v-model="row.disabilityGradeFk"
                                class="q-gutter-xs q-mb-xs"
                            />
                            <VnInput
                                type="number"
                                v-model="row.birthed"
                                :label="t(`birthed`)"
                                data-cy="birthed"
                            />

                            <VnInput
                                type="number"
                                v-model="row.adoptionYear"
                                :label="t(`adoptionYear`)"
                                data-cy="adoptionYear"
                            />
                            <QCheckbox
                                v-model="row.isDependend"
                                :label="t(`isDependend`)"
                            />
                            <QCheckbox
                                v-model="row.isJointCustody"
                                :label="t(`isJointCustody`)"
                                size="xs"
                            />
                            <QBtn
                                @click="deleteRelative(rows[0].id)"
                                class="cursor-pointer"
                                color="primary"
                                flat
                                icon="delete"
                                style="flex: 0"
                            />
                        </div>
                        <VnRow class="justify-left items-center">
                            <QBtn
                                @click="insertTag(rows)"
                                class="cursor-pointer"
                                color="primary"
                                flat
                                icon="add"
                                v-shortcut="'+'"
                                style="flex: 0"
                                data-cy="addRelative"
                            />
                        </VnRow>
                    </QCard>
                </template>
            </CrudModel>
        </template>
    </FormModel>
</template>

<i18n>
es:
    familySituation: Situación familiar
    disabilityGrades: Discapacidad
    geographicMobilityDate: Movilidad geografica
    childPension: Pensión hijos
    spousePension: Pensión cónyuge
    isDependend: Ayuda / Movilidad reducida
    spouseNif: NIF cónyuge
    hasHousingPaymentBefore: Pagos vivienda anterior 2011
    hasHousingPaymentAfter: Pagos vivienda posterior 2011
    hasExtendedWorking: Prolongación actividad laboral
    isDescendant: Descen/Ascen
    disabilityGradeFk: Discapacidad
    birthed: Año nacimiento
    adoptionYear: Año adopción
    isJointCustody: Computo por entero
    Relatives: Relacionados
en:
    familySituation: Family Situation
    disabilityGrades: Disability Grades
    geographicMobilityDate: Geographic Mobility Date
    childPension: Child Pension
    spousePension: Spouse Pension
    isDependend: Dependent Suport / Reduced Mobility
    spouseNif: Spouse NIF (Tax ID)
    hasHousingPaymentBefore: Housing Payments Before 2011
    hasHousingPaymentAfter: Housing Payments After 2011
    hasExtendedWorking: Extended Work Activity
    isDescendant: Descendant/Ascendant
    disabilityGradeFk: Disability Grade
    birthed: Birth Year
    adoptionYear: Adoption Year
    isJointCustody: Joint custody
    Relatives: Relatives
</i18n>
