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

import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import FetchData from 'src/components/FetchData.vue';

import { toDate, toCurrency } from 'src/filters';
import axios from 'axios';

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
});

const route = useRoute();
const { t } = useI18n();

const entityId = computed(() => $props.id || route.params.id);
const summaryRef = ref();
const travel = ref();
const entries = ref([]);
const thermographs = ref([]);
const warehouses = ref([]);

const entriesTableColumns = computed(() => {
    return [
        {
            label: t('travel.summary.confirmed'),
            field: 'isConfirmed',
            name: 'isConfirmed',
            align: 'left',
            showValue: false,
        },
        {
            label: t('travel.summary.entryId'),
            field: 'id',
            name: 'id',
            align: 'left',
            showValue: false,
        },
        {
            label: t('globals.pageTitles.supplier'),
            field: 'supplierName',
            name: 'supplierName',
            align: 'left',
            showValue: true,
        },
        {
            label: t('globals.reference'),
            field: 'reference',
            name: 'reference',
            align: 'left',
            showValue: true,
        },
        {
            label: t('travel.summary.hb'),
            field: 'hb',
            name: 'hb',
            align: 'left',
            showValue: true,
        },
        {
            label: t('travel.summary.freight'),
            field: 'freightValue',
            name: 'freightValue',
            align: 'left',
            format: (val) => {
                return toCurrency(val);
            },
            showValue: true,
        },
        {
            label: t('travel.summary.package'),
            field: 'packageValue',
            name: 'packageValue',
            align: 'left',
            format: (val) => {
                return toCurrency(val);
            },
            showValue: true,
        },
        { label: 'CC', field: 'cc', name: 'cc', align: 'left', showValue: true },
        {
            label: 'Pallet',
            field: 'pallet',
            name: 'pallet',
            align: 'left',
            showValue: true,
        },
        { label: 'm³', field: 'm3', name: 'm3', align: 'left', showValue: true },
        {
            label: '',
            field: 'observation',
            name: 'observation',
            align: 'left',
            toolTip: 'Observation three',
            showValue: false,
        },
    ];
});

const thermographsTableColumns = computed(() => {
    return [
        {
            label: t('travel.thermographs.code'),
            field: 'thermographFk',
            name: 'thermographFk',
            align: 'left',
        },
        {
            label: t('travel.thermographs.temperature'),
            field: 'temperatureFk',
            name: 'temperatureFk',
            align: 'left',
        },
        {
            label: t('globals.maxTemperature'),
            field: 'maxTemperature',
            name: 'maxTemperature',
            align: 'left',
            format: (val) => (val ? `${val}°` : ''),
        },
        {
            label: t('globals.minTemperature'),
            field: 'minTemperature',
            name: 'minTemperature',
            align: 'left',
            format: (val) => (val ? `${val}°` : ''),
        },
        {
            label: t('travel.thermographs.state'),
            field: 'result',
            name: 'result',
            align: 'left',
        },
        {
            label: t('travel.thermographs.destination'),
            field: 'warehouseFk',
            name: 'destination',
            align: 'left',
            format: (val) =>
                warehouses.value.find((warehouse) => warehouse.id === val)?.name,
        },
        {
            label: t('travel.thermographs.created'),
            field: 'created',
            name: 'created',
            align: 'left',
            format: (val) => toDate(val),
        },
    ];
});

const entriesTableRows = computed(() => {
    if (!entries.value && !entries.value.length > 0) return [];
    return entries.value;
});

const entriesTotalHb = computed(() =>
    entriesTableRows.value.reduce((acc, { hb }) => acc + hb, 0)
);

const entriesTotalFreight = computed(() =>
    toCurrency(
        entriesTableRows.value.reduce((acc, { freightValue }) => acc + freightValue, 0)
    )
);

const entriesTotalPackageValue = computed(() =>
    toCurrency(
        entriesTableRows.value.reduce((acc, { packageValue }) => acc + packageValue, 0)
    )
);

const entriesTotalCc = computed(() =>
    entriesTableRows.value.reduce((acc, { cc }) => acc + cc, 0)
);

const entriesTotalPallet = computed(() =>
    entriesTableRows.value.reduce((acc, { pallet }) => acc + pallet, 0)
);

const entriesTotalM3 = computed(() =>
    entriesTableRows.value.reduce((acc, { m3 }) => acc + m3, 0)
);

const getTravelEntries = async (id) => {
    try {
        const { data } = await axios.get(`Travels/${id}/getEntries`);
        entries.value = data;
    } catch (err) {
        console.error('Error fetching travel entries');
    }
};

const getTravelThermographs = async (id) => {
    try {
        const filter = {
            include: {
                relation: 'warehouse',
                scope: {
                    fields: ['id', 'name'],
                },
            },
            where: { travelFk: id },
        };

        const { data } = await axios.get('TravelThermographs', {
            params: { filter: JSON.parse(JSON.stringify(filter)) },
        });
        thermographs.value = data;
    } catch (err) {
        console.error('Error fetching travel thermographs');
    }
};

async function setTravelData(travelData) {
    try {
        if (travelData) {
            travel.value = travelData;
            await getTravelEntries(travel.value.id);
            await getTravelThermographs(travel.value.id);
        }
    } catch (err) {
        console.error(`Error setting travel data`, err);
    }
}

const getLink = (param) => `#/travel/${entityId.value}/${param}`;
</script>

<template>
    <FetchData
        url="Warehouses"
        :filter="{ fields: ['id', 'name'] }"
        order="name"
        @on-fetch="(data) => (warehouses = data)"
        auto-load
    />
    <CardSummary
        ref="summaryRef"
        :url="`Travels/${entityId}/getTravel`"
        @on-fetch="(data) => setTravelData(data)"
        data-key="TravelSummary"
    >
        <template #header>
            <span>{{ travel.ref }} - {{ travel.id }}</span>
        </template>

        <template #body>
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv :label="t('globals.shipped')" :value="toDate(travel.shipped)" />
                <VnLv
                    :label="t('globals.wareHouseOut')"
                    :value="travel.warehouseOut?.name"
                />
                <QCheckbox
                    :label="t('travel.summary.delivered')"
                    v-model="travel.isDelivered"
                    :disable="true"
                />
            </QCard>
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
                <VnLv
                    :label="t('globals.wareHouseIn')"
                    :value="travel.warehouseIn?.name"
                />
                <QCheckbox
                    :label="t('travel.summary.received')"
                    v-model="travel.isReceived"
                    :disable="true"
                />
            </QCard>
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
                    <VnTitle
                        :url="getLink('basic-data')"
                        :text="t('globals.pageTitles.basicData')"
                    />
                </QCardSection>
                <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
                <VnLv :label="t('globals.reference')" :value="travel.ref" />
                <VnLv label="m³" :value="travel.m3" />
                <VnLv :label="t('globals.totalEntries')" :value="travel.totalEntries" />
            </QCard>
            <QCard class="full-width">
                <VnTitle :text="t('travel.summary.entries')" />
                <QTable
                    :rows="entriesTableRows"
                    :columns="entriesTableColumns"
                    row-key="id"
                    class="full-width q-mt-md"
                >
                    <template #header="props">
                        <QTr :props="props" class="bg">
                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                    <template #body-cell-isConfirmed="{ col, row }">
                        <QTd>
                            <QCheckbox
                                v-if="col.name === 'isConfirmed'"
                                :label="t('travel.summary.received')"
                                :true-value="1"
                                :false-value="0"
                                v-model="row[col.name]"
                                :disable="true"
                            />
                        </QTd>
                    </template>
                    <template #body-cell-id="{ col, value }">
                        <QTd>
                            <QBtn v-if="col.name === 'id'" flat class="link">
                                {{ value }}
                                <EntryDescriptorProxy :id="value" />
                            </QBtn>
                        </QTd>
                    </template>
                    <template #body-cell-observation="{ value }">
                        <QTd>
                            <QIcon name="insert_drive_file" color="primary" size="24px">
                                <QTooltip>{{ value }}</QTooltip>
                            </QIcon>
                        </QTd>
                    </template>
                    <template #bottom-row>
                        <QTd></QTd>
                        <QTd></QTd>
                        <QTd></QTd>
                        <QTd></QTd>
                        <QTd class="text-bold">{{ entriesTotalHb }}</QTd>
                        <QTd class="text-bold">{{ entriesTotalFreight }}</QTd>
                        <QTd class="text-bold">{{ entriesTotalPackageValue }}</QTd>
                        <QTd class="text-bold">{{ entriesTotalCc }}</QTd>
                        <QTd class="text-bold">{{ entriesTotalPallet }}</QTd>
                        <QTd class="text-bold">{{ entriesTotalM3 }}</QTd>
                    </template>
                </QTable>
            </QCard>

            <QCard class="full-width" v-if="thermographs.length > 0">
                <RouterLink
                    class="header header-link"
                    :to="{
                        name: 'TravelThermographsIndex',
                        params: { id: travel.id },
                    }"
                >
                    {{ t('travel.summary.thermographs') }}
                    <QIcon name="open_in_new" />
                </RouterLink>
                <QTable
                    :rows="thermographs"
                    :columns="thermographsTableColumns"
                    row-key="id"
                    class="full-width q-mt-md"
                />
            </QCard>
        </template>
    </CardSummary>
</template>
