<template>
    <LoadingComponent :props="loading" />

    <div class="db-card db-tab-div active">
        <div class="db-card-header border-none">
            <h3 class="db-card-title">{{ $t('menu.item_categories') }}</h3>
            <div class="db-card-filter">
                <TableLimitComponent :method="list" :search="props.search" :page="paginationPage" />
                <ItemCategoryCreateComponent :props="props" />
            </div>
        </div>

        <div class="db-table-responsive">
            <table class="db-table stripe">
                <thead class="db-table-head">
                    <tr class="db-table-head-tr">
                        <th class="db-table-head-th"><i class="lab lab-list"></i>
                        </th>
                        <th class="db-table-head-th">{{ $t('label.name') }}</th>
                        <th class="db-table-head-th">{{ $t('label.status') }}</th>
                        <th class="db-table-head-th">{{ $t('label.action') }}</th>
                    </tr>
                </thead>
                <draggable tag="tbody" class="db-table-body" v-if="categories.length > 0" v-model="categories"
                    @end="sortCategory" :handle="'.drag-handle'">
                    <tr class="db-table-body-tr" v-for="itemCategory in categories" :key="itemCategory">
                        <td class="db-table-body-td"><i class="lab lab-move cursor-move drag-handle"></i>
                        </td>
                        <td class="db-table-body-td">{{ itemCategory.name }}</td>
                        <td class="db-table-body-td">
                            <span :class="statusClass(itemCategory.status)">
                                {{ enums.statusEnumArray[itemCategory.status] }}
                            </span>
                        </td>
                        <td class="db-table-body-td">
                            <div class="flex justify-start items-center sm:items-start sm:justify-start gap-1.5">
                                <SmViewComponent :link="'admin.settings.itemCategory.show'" :id="itemCategory.id" />
                                <SmModalEditComponent @click="edit(itemCategory)" />
                                <SmDeleteComponent @click="destroy(itemCategory.id)" />
                            </div>
                        </td>
                    </tr>
                </draggable>
                <draggable tag="tbody" class="db-table-body p-4 text-center w-full" v-else>
                    <tr class="db-table-body-tr">
                        <td colspan="5" class="db-table-body-td">
                            <div class="p-4">
                                <div class="w-full flex items-center justify-center mt-2 mb-3">
                                    <img class="max-w-[300px] w-full h-full"
                                        :src="ENV.API_URL + '/images/order/order-not-found.png'" alt="Not Found">
                                </div>
                                <span class="d-block text-lg">{{ $t('message.no_data_available') }}</span>
                            </div>
                        </td>
                    </tr>
                </draggable>
            </table>
        </div>

        <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-6"
            v-if="categories.length > 0">
            <PaginationSMBox :pagination="pagination" :method="list" />
            <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                <PaginationTextComponent :props="{ page: paginationPage }" />
                <PaginationBox :pagination="pagination" :method="list" />
            </div>
        </div>
    </div>
</template>
<script>
import LoadingComponent from "../../components/LoadingComponent.vue";
import ItemCategoryCreateComponent from "./ItemCategoryCreateComponent.vue";
import alertService from "../../../../services/alertService";
import PaginationTextComponent from "../../components/pagination/PaginationTextComponent.vue";
import PaginationBox from "../../components/pagination/PaginationBox.vue";
import PaginationSMBox from "../../components/pagination/PaginationSMBox.vue";
import appService from "../../../../services/appService";
import statusEnum from "../../../../enums/modules/statusEnum";
import TableLimitComponent from "../../components/TableLimitComponent.vue";
import SmDeleteComponent from "../../components/buttons/SmDeleteComponent.vue";
import SmModalEditComponent from "../../components/buttons/SmModalEditComponent.vue";
import SmViewComponent from "../../components/buttons/SmViewComponent.vue";
import { VueDraggableNext } from 'vue-draggable-next';
import { useItemCategoryStore } from "../../../../stores/itemCategory";
import ENV from '../../../../config/env';

export default {
    name: "ItemCategoryListComponent",
    components: {
        TableLimitComponent,
        PaginationSMBox,
        PaginationBox,
        PaginationTextComponent,
        ItemCategoryCreateComponent,
        LoadingComponent,
        SmDeleteComponent,
        SmModalEditComponent,
        SmViewComponent,
        draggable: VueDraggableNext,
    },
    data() {
        return {
            loading: {
                isActive: false
            },
            enums: {
                statusEnum: statusEnum,
                statusEnumArray: {
                    [statusEnum.ACTIVE]: this.$t("label.active"),
                    [statusEnum.INACTIVE]: this.$t("label.inactive")
                }
            },
            props: {
                form: {
                    name: "",
                    status: statusEnum.ACTIVE,
                    description: ""
                },
                search: {
                    paginate: 1,
                    page: 1,
                    per_page: 10,
                    order_column: 'sort',
                    order_type: 'asc',
                }
            },
            ENV: ENV,
            categories: [],
            itemCategoryStore: useItemCategoryStore(),
        }
    },
    computed: {
        itemCategories: function () {
            return this.itemCategoryStore.lists;
        },
        pagination: function () {
            return this.itemCategoryStore.pagination;
        },
        paginationPage: function () {
            return this.itemCategoryStore.page;
        }
    },
    mounted() {
        this.list();
    },
    methods: {
        statusClass: function (status) {
            return appService.statusClass(status);
        },
        textShortener: function (text, number = 30) {
            return appService.textShortener(text, number);
        },
        list: function (page = 1) {
            this.loading.isActive = true;
            this.props.search.page = page;
            this.itemCategoryStore.fetchLists(this.props.search).then((res) => {
                this.loading.isActive = false;
            }).catch((err) => {
                this.loading.isActive = false;
            });
        },
        edit: function (itemCategory) {
            appService.modalShow();
            this.loading.isActive = true;
            this.itemCategoryStore.edit(itemCategory.id);
            this.loading.isActive = false;
            this.props.errors = {};
            this.props.form = {
                name: itemCategory.name,
                status: itemCategory.status,
                description: itemCategory.description
            };
        },
        destroy: function (id) {
            appService.destroyConfirmation().then((res) => {
                try {
                    this.loading.isActive = true;
                    this.itemCategoryStore.destroy({
                        id: id,
                        search: this.props.search,
                    })
                        .then((res) => {
                            this.loading.isActive = false;
                            alertService.successFlip(
                                null,
                                this.$t("menu.item_categories")
                            );
                        })
                        .catch((err) => {
                            this.loading.isActive = false;
                            alertService.error(err.response.data.message);
                        });
                } catch (err) {
                    this.loading.isActive = false;
                    alertService.error(err.response.data.message);
                }
            })
                .catch((err) => {
                    this.loading.isActive = false;
                });
        },
        sortCategory: function () {
            const sortedIds = this.categories.map(category => category.id);
            this.itemCategoryStore.sortCategory({
                form: { category_id: sortedIds },
                search: this.props.search
            }).then((res) => {
                this.list();
            }).catch((err) => {
                alertService.error(err.response.data.message);
            });
        },
    },
    watch: {
        itemCategories: {
            deep: true,
            handler(itemCategory) {
                this.categories = itemCategory;
            }
        }
    }
}
</script>