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

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

import { useVnConfirm } from 'composables/useVnConfirm';
import { useArrayData } from 'composables/useArrayData';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';

const { t } = useI18n();
const { notify } = useNotify();
const route = useRoute();
const { openConfirmationModal } = useVnConfirm();

const paginateRef = ref(null);

const arrayData = useArrayData('AliasUsers');
const { store } = arrayData;

const data = computed(() => {
    const dataCopy = JSON.parse(JSON.stringify(store.data));
    return dataCopy.sort((a, b) => a.user?.name.localeCompare(b.user?.name));
});

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

const urlPath = computed(() => `MailAliases/${route.params.id}/accounts`);

const columns = computed(() => [
    {
        name: 'alias',
    },
    {
        name: 'action',
    },
]);

const deleteAlias = async (row) => {
    try {
        await axios.delete(`${urlPath.value}/${row.id}`);
        notify(t('User removed'), 'positive');
        fetchAliases();
    } catch (error) {
        console.error(error);
    }
};

watch(
    () => route.params.id,
    () => {
        store.url = urlPath.value;
        store.filter = filter;
        fetchAliases();
    }
);

const fetchAliases = () => paginateRef.value.fetch();
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <div class="full-width" style="max-width: 400px">
            <VnPaginate
                ref="paginateRef"
                data-key="AliasUsers"
                :filter="filter"
                :url="urlPath"
                :limit="0"
                auto-load
            >
                <template #body>
                    <QTable :rows="data" :columns="columns" hide-header>
                        <template #body="{ row }">
                            <QTr>
                                <QTd>
                                    <span>{{ row.user?.name }}</span>
                                </QTd>
                                <QTd style="width: 50px !important">
                                    <QIcon
                                        name="delete"
                                        size="sm"
                                        class="cursor-pointer"
                                        color="primary"
                                        @click="
                                            openConfirmationModal(
                                                t('User will be removed from alias'),
                                                t('Are you sure you want to continue?'),
                                                () => deleteAlias(row)
                                            )
                                        "
                                    >
                                        <QTooltip>
                                            {{ t('Delete') }}
                                        </QTooltip>
                                    </QIcon>
                                </QTd>
                            </QTr>
                        </template>
                    </QTable>
                </template>
            </VnPaginate>
        </div>
    </QPage>
</template>

<i18n>
es:
    User will be removed from alias: El usuario será borrado del alias
    Are you sure you want to continue?: ¿Seguro que quieres continuar?
    User removed: Usuario borrado
    Delete: Eliminar
</i18n>
