import { DataTable } from 'mantine-datatable';
import { useProductSizes } from '../api/getProductSizes';
import { productSizeColumns } from './Columns';
import { useState } from 'react';
import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
import { ProductSizeListHeader } from './ProductSizeListHeader';
import { ProductSize } from '../types/api';
import { DeleteProductSizeModal } from './DeleteProductSizeModal';
import { EditProductSizeModal } from './EditProductSizeModal';
import { DetailProductSizeModal } from './DetailProductSizeModal';

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

export const ProductSizesList = () => {
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
    const [selectedSize, setSelectedSize] = useState<ProductSize | null>(null);

    const sizeQuery = useProductSizes();
    const sizes = sizeQuery.data ?? [];

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

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

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

    const onDelete = (size: ProductSize) => {
        setSelectedSize(size);
        setIsDeleteModalOpen(true);
    };

    const onEdit = (size: ProductSize) => {
        setSelectedSize(size);
        setIsEditModalOpen(true);
    };

    const onView = (size: ProductSize) => {
        setSelectedSize(size);
        setIsDetailModalOpen(true);
    };

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

                <div className="datatables pagination-padding px-5">
                    <DataTable
                        className="whitespace-nowrap table-hover"
                        records={filteredRecords}
                        columns={productSizeColumns({ onEdit, onView, onDelete })}
                        highlightOnHover
                        minHeight={200}
                        fetching={sizeQuery.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>

            <DeleteProductSizeModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} sizeId={selectedSize?.id || 0} />
            <EditProductSizeModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} size={selectedSize} />
            <DetailProductSizeModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} size={selectedSize} />
        </>
    );
};
