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

import { QBtn } from 'quasar';

import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';

import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';

const { t } = useI18n();
const stateStore = useStateStore();

const arrayData = ref(null);

onBeforeMount(async () => {
    arrayData.value = useArrayData('CustomerNotifications', {
        url: 'Clients',
        limit: 0,
    });
    await arrayData.value.fetch({ append: false });
    stateStore.rightDrawer = true;
});

const rows = computed(() => arrayData.value.store.data);

const selected = ref([]);
const selectedCustomerId = ref(0);

const tableColumnComponents = {
    id: {
        component: QBtn,
        props: () => ({ flat: true, color: 'blue' }),
        event: (prop) => selectCustomerId(prop.row.id),
    },
    socialName: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    city: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    phone: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
    email: {
        component: 'span',
        props: () => {},
        event: () => {},
    },
};

const columns = computed(() => [
    {
        align: 'left',
        field: 'id',
        label: t('Identifier'),
        name: 'id',
    },
    {
        align: 'left',
        field: 'socialName',
        label: t('Social name'),
        name: 'socialName',
    },
    {
        align: 'left',
        field: 'city',
        label: t('City'),
        name: 'city',
    },
    {
        align: 'left',
        field: 'phone',
        label: t('Phone'),
        name: 'phone',
    },
    {
        align: 'left',
        field: 'email',
        label: t('Email'),
        name: 'email',
    },
]);

const selectCustomerId = (id) => {
    selectedCustomerId.value = id;
};
</script>

<template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <CustomerNotificationsFilter data-key="CustomerNotifications" />
        </QScrollArea>
    </QDrawer>

    <VnSubToolbar />

    <QPage class="column items-center q-pa-md">
        <QTable
            :columns="columns"
            :pagination="{ rowsPerPage: 0 }"
            :rows="rows"
            class="full-width q-mt-md"
            hide-bottom
            row-key="id"
            selection="multiple"
            v-model:selected="selected"
        >
            <template #body-cell="props">
                <QTd :props="props">
                    <QTr :props="props" class="cursor-pointer">
                        <component
                            :is="tableColumnComponents[props.col.name].component"
                            class="col-content"
                            v-bind="tableColumnComponents[props.col.name].props(props)"
                            @click="tableColumnComponents[props.col.name].event(props)"
                        >
                            {{ props.value }}
                            <CustomerDescriptorProxy :id="selectedCustomerId" />
                        </component>
                    </QTr>
                </QTd>
            </template>
        </QTable>
    </QPage>
</template>

<style lang="scss" scoped>
.col-content {
    border-radius: 4px;
    padding: 6px;
}
</style>

<i18n>
es:
    Identifier: Identificador
    Social name: Razón social
    Salesperson: Comercial
    Phone: Teléfono
    City: Población
    Email: Email
</i18n>
