import { DataTable } from 'mantine-datatable';
import { useProductCategories } from '../api/getProductCategories';
import { productCategoryColumns } from './Columns';
import { useState } from 'react';
import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
import { ProductCategoryListHeader } from './ProductCategoryListHeader';
import { ProductCategory } from '../types/api';
import { EditProductCategoryModal } from './EditProductCategoryModal';
import { DeleteProductCategoryModal } from './DeleteProductCategoryModal';
import { DetailProductCategoryModal } from './DetailProductCategoryModal';

const PAGE_SIZES = [10, 20, 30, 50];

export const ProductCategoriesList = () => {
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
    const [selectedCategory, setSelectedCategory] = useState<ProductCategory | null>(null);

    const categoryQuery = useProductCategories();
    const categories = categoryQuery.data ?? [];

    const { sortStatus, setSortStatus, page, setPage, pageSize, setPageSize, paginatedRecords, totalRecords } = useSortedPaginatedRecords(categories, {
        columnAccessor: 'id',
        direction: 'desc',
    });

    const [search, setSearch] = useState('');

    const filteredRecords = paginatedRecords.filter((category) => category.name.toLowerCase().includes(search.toLowerCase()));

    const onDelete = (category: ProductCategory) => {
        setSelectedCategory(category);
        setIsDeleteModalOpen(true);
    };

    const onEdit = (category: ProductCategory) => {
        setSelectedCategory(category);
        setIsEditModalOpen(true);
    };

    const onView = (category: ProductCategory) => {
        setSelectedCategory(category);
        setIsDetailModalOpen(true);
    };

    return (
        <>
            <div className="panel px-0 border-white-light dark:border-[#1b2e4b] mt-5">
                <ProductCategoryListHeader search={search} setSearch={setSearch} />

                <div className="datatables pagination-padding px-5">
                    <DataTable
                        className="whitespace-nowrap table-hover"
                        records={filteredRecords}
                        columns={productCategoryColumns({ onEdit, onView, onDelete })}
                        highlightOnHover
                        minHeight={200}
                        fetching={categoryQuery.isLoading}
                        totalRecords={totalRecords}
                        recordsPerPage={pageSize}
                        page={page}
                        onPageChange={setPage}
                        recordsPerPageOptions={PAGE_SIZES}
                        onRecordsPerPageChange={setPageSize}
                        sortStatus={sortStatus}
                        onSortStatusChange={setSortStatus}
                        paginationText={({ from, to, totalRecords }) => `Showing ${from} to ${to} of ${totalRecords} entries`}
                    />
                </div>
            </div>

            <DeleteProductCategoryModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} categoryId={selectedCategory?.id || 0} />
            <EditProductCategoryModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} category={selectedCategory} />
            <DetailProductCategoryModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} category={selectedCategory} />
        </>
    );
};
