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

import FetchData from 'components/FetchData.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';

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

const provincesLocation = ref([]);

const consigneeFilter = {
    fields: [
        'id',
        'isDefaultAddress',
        'isActive',
        'nickname',
        'street',
        'city',
        'provinceFk',
        'phone',
        'mobile',
        'isEqualizated',
        'isLogifloraAllowed',
        'postalCode',
    ],
    order: ['isDefaultAddress DESC', 'isActive DESC', 'nickname ASC'],
    include: [
        {
            relation: 'observations',
            scope: {
                include: 'observationType',
            },
        },
        {
            relation: 'province',
            scope: {
                fields: ['id', 'name'],
            },
        },
    ],
};

const setProvince = (provinceFk) => {
    const result = provincesLocation.value.filter(
        (province) => province.id === provinceFk
    );
    return result[0]?.name || '';
};

const toCustomerConsigneeCreate = () => {
    router.push({ name: 'CustomerConsigneeCreate' });
};

const toCustomerConsigneeEdit = (consigneeId) => {
    router.push({
        name: 'CustomerConsigneeEdit',
        params: {
            id: route.params.id,
            consigneeId,
        },
    });
};
</script>

<template>
    <FetchData
        @on-fetch="(data) => (provincesLocation = data)"
        auto-load
        url="Provinces/location"
    />

    <QCard class="q-pa-lg">
        <VnPaginate
            data-key="CustomerConsignees"
            :url="`Clients/${route.params.id}/addresses`"
            order="id"
            auto-load
            :filter="consigneeFilter"
        >
            <template #body="{ rows }">
                <QCard
                    v-for="(item, index) in rows"
                    :key="index"
                    :class="{
                        'consignees-card': true,
                        'q-mb-md': index < rows.length - 1,
                    }"
                    @click="toCustomerConsigneeEdit(item.id)"
                >
                    <div class="q-ml-xs q-mr-md flex items-center">
                        <QIcon name="star" size="md" color="primary" />
                    </div>
                    <div>
                        <div class="text-weight-bold q-mb-sm">
                            {{ item.nickname }} - #{{ item.id }}
                        </div>
                        <div>{{ item.street }}</div>
                        <div>
                            {{ item.postalCode }} - {{ item.city }},
                            {{ setProvince(item.provinceFk) }}
                        </div>
                        <div class="flex">
                            <QCheckbox
                                :label="t('Is equalizated')"
                                v-model="item.isEqualizated"
                                class="q-mr-lg"
                                disable
                            />
                            <QCheckbox
                                :label="t('Is logiflora allowed')"
                                v-model="item.isLogifloraAllowed"
                                disable
                            />
                        </div>
                    </div>

                    <QSeparator
                        class="q-mx-lg"
                        v-if="item.observations.length"
                        vertical
                    />

                    <div v-if="item.observations.length">
                        <div
                            :key="index"
                            class="flex q-mb-sm"
                            v-for="(observation, index) in item.observations"
                        >
                            <div class="text-weight-bold q-mr-sm">
                                {{ observation.observationType.description }}:
                            </div>
                            <div>{{ observation.description }}</div>
                        </div>
                    </div>
                </QCard>
            </template>
        </VnPaginate>
    </QCard>
    <QPageSticky :offset="[18, 18]">
        <QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
        <QTooltip>
            {{ t('New consignee') }}
        </QTooltip>
    </QPageSticky>
</template>

<style lang="scss" scoped>
.consignees-card {
    border: 2px solid var(--vn-light-gray);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    cursor: pointer;

    &:hover {
        background-color: var(--vn-light-gray);
    }
}
</style>

<i18n>
es:
    Is equalizated: Recargo de equivalencia
    Is logiflora allowed: Compra directa en Holanda
    New consignee: Nuevo consignatario
</i18n>
