<script setup>
import { nextTick, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';

import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
import FetchData from 'components/FetchData.vue';
import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';

import { useStateStore } from 'stores/useStateStore';
import axios from 'axios';

import { useRouter } from 'vue-router';
const router = useRouter();
const stateStore = useStateStore();
const route = useRoute();
const { t } = useI18n();
const workerIsFreelance = ref();
const WorkerFreelanceRef = ref();
const workerCalendarFilterRef = ref(null);
const workerCalendarRef = ref(null);
const absenceType = ref(null);
const hasWorkCenter = ref(false);
const isSubordinate = ref(false);
const businessFk = ref(null);
const year = ref(Date.vnNew().getFullYear());
const contractHolidays = ref(null);
const yearHolidays = ref(null);
const eventsMap = ref({});
const festiveEventsMap = ref({});

const onFetchActiveContract = (data) => {
    if (!data) return;
    businessFk.value = data?.businessFk;
    hasWorkCenter.value = Boolean(data?.workCenterFk);
};

const addEvent = (day, newEvent, isFestive = false) => {
    const timestamp = new Date(day).getTime();
    let event = eventsMap.value[timestamp];

    if (!event) {
        eventsMap.value[timestamp] = newEvent;
        if (isFestive)
            festiveEventsMap.value[timestamp] = JSON.parse(JSON.stringify(newEvent));
    } else {
        const oldName = event.name;
        const oldEventWasFestive = event.isFestive;
        Object.assign(event, newEvent);
        event.isFestive = oldEventWasFestive;
        event.name = `${oldName}, ${event.name}`;
    }
};

const onFetchAbsences = (data) => {
    if (!data) return;

    eventsMap.value = {};

    if (data.holidays) {
        data.holidays.forEach((holiday) => {
            const holidayDetail = holiday?.detail?.name;
            const holidayType = holiday?.type?.name;
            const holidayName = holidayDetail || holidayType;

            addEvent(
                holiday.dated,
                {
                    name: holidayName,
                    isFestive: true,
                },
                true
            );
        });
    }
    if (data.absences) {
        data.absences.forEach((absence) => {
            let type = absence.absenceType;
            addEvent(absence.dated, {
                name: type.name,
                color: type.rgb,
                type: type.code,
                absenceId: absence.id,
                isFestive: false,
                isHoliday: false,
            });
        });
    }
};

const getAbsences = async () => {
    try {
        const params = {
            workerFk: route.params.id,
            businessFk: businessFk.value,
            year: year.value,
        };
        const { data } = await axios.get('Calendars/absences', { params });
        if (data) onFetchAbsences(data);

        return data;
    } catch (error) {
        console.error('Error fetching absences:', error);
        return null;
    }
};

const getHolidays = async (params) => {
    try {
        const { data } = await axios.get(`Workers/${route.params.id}/holidays`, {
            params,
        });
        return data;
    } catch (error) {
        console.error('Error fetching holidays:', error);
        return null;
    }
};

const updateContractHolidays = async () => {
    contractHolidays.value = await getHolidays({
        businessFk: businessFk.value,
        year: year.value,
    });
};

const updateYearHolidays = async () => {
    yearHolidays.value = await getHolidays({ year: year.value });
};

const refreshData = () => {
    updateYearHolidays();
    updateContractHolidays();
    getAbsences();
    WorkerFreelanceRef.value.fetch();
};

const onDeletedEvent = (timestamp) => {
    delete eventsMap.value[timestamp];
    // Si el evento que eliminamos se encontraba dentro de un dia festivo, volvemos a agregar el evento festivo
    if (festiveEventsMap.value[timestamp])
        eventsMap.value[timestamp] = festiveEventsMap.value[timestamp];
};
const activeContractRef = ref(null);

watch(
    () => router.currentRoute.value.params.id,
    async () => {
        await nextTick();
        await activeContractRef.value.fetch();
    }
);
watch([year, businessFk], () => refreshData());
</script>

<template>
    <FetchData
        ref="activeContractRef"
        :url="`Workers/${route.params.id}/activeContract`"
        @on-fetch="onFetchActiveContract"
        auto-load
    />
    <FetchData
        :url="`Workers/${route.params.id}/isSubordinate`"
        @on-fetch="(data) => (isSubordinate = data)"
        auto-load
    />
    <FetchData
        :url="`Workers/${route.params.id}`"
        @on-fetch="(data) => (workerIsFreelance = data.isFreelance)"
        ref="WorkerFreelanceRef"
        auto-load
    />
    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
        <WorkerCalendarFilter
            ref="workerCalendarFilterRef"
            v-model:business-fk="businessFk"
            v-model:year="year"
            v-model:absence-type="absenceType"
            :contract-holidays="contractHolidays"
            :year-holidays="yearHolidays"
        />
    </Teleport>
    <QPage class="column items-center">
        <QCard v-if="workerIsFreelance">
            <QCardSection class="text-center">
                {{ t('Autonomous worker') }}
            </QCardSection>
        </QCard>
        <QCard v-else class="full-width">
            <QIcon
                v-if="isSubordinate"
                name="info"
                size="sm"
                class="absolute"
                style="top: 14px; right: 14px"
            >
                <QTooltip max-width="250px">
                    {{ t('addAbsencesText') }}
                </QTooltip>
            </QIcon>
            <div class="calendar-container">
                <WorkerCalendarItem
                    ref="workerCalendarRef"
                    v-for="month in 12"
                    :key="month"
                    :year="year"
                    :month="month"
                    :absence-type="absenceType"
                    :business-fk="businessFk"
                    :events="eventsMap"
                    @refresh="refreshData"
                    @on-deleted-event="onDeletedEvent"
                />
            </div>
        </QCard>
    </QPage>
</template>

<style lang="scss" scoped>
.calendar-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 40px;
    justify-content: center;
}
</style>

<i18n>
en:
    addAbsencesText: To start adding absences, click an absence type from the right menu and then on the day you want to add an absence

es:
    Search worker: Buscar trabajador
    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
    addAbsencesText: Para empezar a añadir ausencias, haz clic en un tipo de ausencia desde el menu de la derecha y después en el día que quieres añadir la ausencia
</i18n>
