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

import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
import FetchData from 'components/FetchData.vue';

import { toDateFormat } from 'src/filters/date.js';
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
import ZoneSearchbar from './Card/ZoneSearchbar.vue';

const { t } = useI18n();
const weekdayStore = useWeekdayStore();

const details = ref([]);

const columns = computed(() => [
    {
        label: t('upcomingDeliveries.province'),
        name: 'province',
        field: 'name',
        align: 'left',
    },
    {
        label: t('upcomingDeliveries.closing'),
        name: 'closing',
        field: 'hour',
        align: 'left',
    },
    {
        label: t('upcomingDeliveries.id'),
        name: 'id',
        field: 'zoneFk',
        align: 'left',
    },
]);

const getWeekDayName = (date) => {
    const weekDay = new Date(date).getDay();
    return t(`weekdays.${weekdayStore.weekdays[weekDay].code}`);
};

const getHeaderTitle = (date) => {
    return `${getWeekDayName(date)} - ${toDateFormat(date)}`;
};

onMounted(() => weekdayStore.initStore());
</script>

<template>
    <FetchData
        url="Zones/getUpcomingDeliveries"
        @on-fetch="(data) => (details = data)"
        auto-load
    />
    <ZoneSearchbar />
    <VnSubToolbar />
    <QPage class="column items-center q-pa-md">
        <QCard class="full-width q-pa-md">
            <div
                v-for="(detail, index) in details"
                :key="index"
                class="full-width flex q-mb-lg"
            >
                <span class="header">
                    {{ getHeaderTitle(detail.shipped) }}
                </span>
                <QTable flat :columns="columns" :rows="detail.lines" class="full-width" />
            </div>
        </QCard>
    </QPage>
</template>

<style scoped lang="scss">
.header {
    min-width: 100% !important;
    display: flex;
    align-items: center;
    padding-left: 8px;
    height: 35px;
    border-bottom: 1px solid $primary;
    background-color: var(--vn-page-color);
    font-size: 19px;
    font-weight: bold;
    text-transform: uppercase;
}
</style>
