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

import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';

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

const addressesFilter = {
    fields: [
        'id',
        'nickname',
        'street',
        'city',
        'provinceFk',
        'phone',
        'mobile',
        'postalCode',
    ],
    order: ['nickname ASC'],
    include: [
        {
            relation: 'province',
            scope: {
                fields: ['id', 'name'],
            },
        },
    ],
};

const redirectToCreateView = () => {
    router.push({ name: 'SupplierAddressesCreate' });
};

const redirectToUpdateView = (addressData) => {
    const stringifiedAddressData = JSON.stringify(addressData);
    router.push({
        name: 'SupplierAddressesCreate',
        query: { addressData: stringifiedAddressData },
    });
};
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <div class="vn-card-list">
            <VnPaginate
                data-key="SupplierAddress"
                :url="`Suppliers/${route.params.id}/addresses`"
                :filter="addressesFilter"
                auto-load
            >
                <template #body="{ rows }">
                    <CardList
                        v-for="row of rows"
                        :key="row.id"
                        :title="row.nickname"
                        :id="row.id"
                        @click="redirectToUpdateView(row)"
                    >
                        <template #list-items>
                            <VnLv
                                :label="t('supplier.addresses.street')"
                                :value="row.street"
                            />
                            <VnLv
                                :label="t('supplier.addresses.postcode')"
                                :value="`${row.postalCode} - ${row.city}, ${row.province.name}`"
                            />
                            <VnLv
                                :label="t('supplier.addresses.phone')"
                                :value="`${row.phone}, ${row.mobile}`"
                            />
                        </template>
                    </CardList>
                </template>
            </VnPaginate>
        </div>
        <QPageSticky :offset="[20, 20]">
            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
            <QTooltip>
                {{ t('New address') }}
            </QTooltip>
        </QPageSticky>
    </QPage>
</template>

<i18n>
es:
    New address: Nueva dirección
</i18n>
