<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import FetchData from 'components/FetchData.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import AclFilter from './Acls/AclFilter.vue';
import AclFormView from './Acls/AclFormView.vue';

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

defineProps({
    id: {
        type: Number,
        default: 0,
    },
});

const { notify } = useNotify();
const { t } = useI18n();
const stateStore = useStateStore();
const { openConfirmationModal } = useVnConfirm();

const paginateRef = ref();
const formDialog = ref(false);
const rolesOptions = ref([]);

const exprBuilder = (param, value) => {
    switch (param) {
        case 'search':
            return { model: { like: `%${value}%` } };
        default:
            return { [param]: value };
    }
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('id'),
        isId: true,
        field: 'id',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'model',
        label: t('model'),
        field: 'model',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'principalId',
        label: t('principalId'),
        field: 'principalId',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'property',
        label: t('property'),
        field: 'property',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'accessType',
        label: t('accessType'),
        field: 'accessType',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'accessType',
        label: t('accessType'),
        field: 'accessType',
        cardVisible: true,
        create: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('Delete'),
                icon: 'delete',
                action: deleteAcl(),
                isPrimary: true,
            },
        ],
    },
]);
const deleteAcl = async (id) => {
    try {
        await axios.delete(`ACLs/${id}`);
        paginateRef.value.fetch();
        notify('ACL removed', 'positive');
    } catch (error) {
        console.error('Error deleting Acl: ', error);
    }
};
function showFormDialog(data) {
    formDialog.value = {
        show: true,
        formInitialData: { ...data },
    };
}
</script>

<template>
    <FetchData
        url="VnRoles"
        :filter="{ fields: ['name'], order: 'name ASC' }"
        @on-fetch="(data) => (rolesOptions = data)"
        auto-load
    />
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#searchbar">
            <VnSearchbar
                data-key="AccountAcls"
                url="ACLs"
                :expr-builder="exprBuilder"
                :label="t('acls.search')"
                :info="t('acls.searchInfo')"
            />
        </Teleport>
    </template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <AclFilter data-key="AccountAcls" />
        </QScrollArea>
    </QDrawer>

    <VnTable
        ref="tableRef"
        data-key="AccountUsers"
        :url="`ACLs`"
        :create="{
            urlCreate: 'ACLs',
            title: 'Create ACL',
            onDataSaved: () => tableRef.reload(),
            formInitialData: {},
        }"
        order="id DESC"
        :columns="columns"
        default-mode="table"
        auto-load
        :right-search="false"
        :is-editable="true"
        :use-model="true"
    />
</template>

<i18n>
es:
    New ACL: Nuevo ACL
    ACL removed: ACL eliminado
    ACL will be removed: El ACL será eliminado
    Are you sure you want to continue?: ¿Seguro que quieres continuar?
</i18n>
