<template>
    <Panel :header="$t('categories')">
        <template #icons>
            <Button icon="pi pi-plus" :label="$t('add')" severity="success" @click="create()" />
        </template>
        <TreeTable :value="store.items" v-model:expandedKeys="expandedKeys">

            
            <Column field="name" :header="$t('name')"  />

            <!-- <Column :header="$t('image')">
                <template #body="{ node: { data: { headerImage } } }">
                    <Image :src="headerImage" imageClass="rounded h-10" class="align-middle" preview
                        :pt="{ toolbar: 'flex-row-reverse' }" />
                </template>
            </Column> -->
            <Column field="id" :header="$t('id')"  />




            <Column :field="({ createdAt }) => jDate(createdAt)" :header="$t('createdAt')"  />

       
            <Column headerClass="w-32" :header="$t('options')">
                <template #body="{ node: { data } }">
                    <div class="flex justify-start">
                        <!-- <Button icon="pi pi-pencil" rounded text severity="secondary" @click="edit(data)" /> -->
                        <Button icon="pi pi-trash" rounded text severity="danger" @click="remove(data)"
                            :loading="data.removing" />
                    </div>
                </template>
            </Column>

            <template #empty>
                <p>{{ store.fetching ? $t('loading') : $t('emptyTable') }}</p>
            </template>
            <template #footer>
                <Pagination :total="store.total" />
            </template>
        </TreeTable>
    </Panel>
</template>

<script setup>
import { jDate } from '@/utils/jDate';
import { treeTogglerRTL } from '@/utils/tree-toggler-rtl';
import { inject, defineAsyncComponent, watchEffect, ref, watch, nextTick } from 'vue';
import { useCategoriesStore } from '@/stores/categoreis';
import { useRoute } from 'vue-router';

const expandedKeys = ref({});

const CategoryForm = defineAsyncComponent(() => import('../components/CategoryForm.vue'));

const { dialog, confirm, toast, t } = inject('service')

const store = useCategoriesStore()

const create = () => {
    dialog.open(CategoryForm, {
        props: { modal: true, closable: false, header: t('createNewCategory') },
        data: { categories: 'store.items' }
    });
};

const edit = (category) => {
    dialog.open(CategoryForm, {
        props: { modal: true, closable: false, header: t('editCategory') },
        data: { categories: store.items, category }
    });
};

const remove = (category) => {
  //  console.log(category.id);
    confirm.require({
        message: t('Are you sure you want to proceed?'),
        header: t('Danger Zone'),
        icon: 'pi pi-info-circle',
        acceptClass: 'p-button-danger p-button-sm',
        rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
        rejectLabel: t('cancel'),
        acceptLabel: t('beOmitted'),
        defaultFocus: 'reject',
        accept: async () => {
            category.removing = true

            const { status, data } = await store.remove(category.id);

            category.removing = false

            if (status === 200)
                toast.add({
                    severity: 'success', summary: t('successful'), detail: t('destroySuccessfully'), life: 3000
                });
            else
                toast.add({
                    severity: 'error', summary: t('error'), detail: data.msg, life: 3000
                });
        },
    });
};

const route = useRoute()

watchEffect(() => {
    const { page = 1, rows = 10 } = route.query
    store.index(page, rows)
})
watch(store , () =>{
    store.index()
})

watch(expandedKeys, () => nextTick(() => treeTogglerRTL('button.p-treetable-toggler')))
</script>

<style lang="scss" scoped></style>
