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

import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import ZoneDescriptorMenuItems from './ZoneDescriptorMenuItems.vue';

import useCardDescription from 'src/composables/useCardDescription';

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

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

const filter = {
    include: [
        {
            relation: 'agencyMode',
            scope: {
                fields: ['name', 'id'],
            },
        },
    ],
};

const entityId = computed(() => {
    return $props.id || route.params.id;
});

const data = ref(useCardDescription());

const setData = (entity) => {
    data.value = useCardDescription(entity.ref, entity.id);
};

function extractHour(dateTime) {
    const date = new Date(dateTime);
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
}
</script>

<template>
    <CardDescriptor
        module="Zone"
        :url="`Zones/${entityId}`"
        :title="data.title"
        :subtitle="data.subtitle"
        :filter="filter"
        @on-fetch="setData"
        data-key="zoneData"
    >
        <template #header-extra-action>
            <QBtn
                round
                flat
                dense
                size="md"
                icon="preview"
                color="white"
                class="link"
                :to="{ name: 'ZoneList' }"
            >
                <QTooltip>
                    {{ t('Summary') }}
                </QTooltip>
            </QBtn>
        </template>
        <!-- <template #menu="{ entity }">
            <ZoneDescriptorMenuItems :zone="entity" />
        </template> -->
        <template #body="{ entity }">
            {{ console.log('entity', entity) }}
            <VnLv :label="t('Agency')" :value="entity.agencyMode.name" />
            <VnLv :label="t('Closing hour')" :value="extractHour(entity.hour)" />
            <VnLv :label="t('zoneing days')" :value="entity.zoneingDays" />
            <VnLv :label="t('Price')" :value="entity.price" />
            <VnLv :label="t('Bonus')" :value="entity.bonus" />
        </template>
    </CardDescriptor>
</template>

<i18n>
es:
    Summary: Detalles
    The zone will be deleted: El envío será eliminado
    Do you want to delete this zone?: ¿Quieres eliminar este envío?
    All zones with current agency: Todos los envíos con la agencia actual
    Agency: Agencia
    Closing hour: Hora de cierre
    zoneing days: Días de viaje
    Price: Precio
    Bonus: Bonificación
</i18n>
