import { DataTable } from 'mantine-datatable';
import { useProductCollections } from '../api/getProductCollections';
import { productCollectionColumns } from './Columns';
import { useState } from 'react';
import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
import { ProductCollectionListHeader } from './ProductCollectionListHeader';
import { ProductCollection } from '../types/api';
import { DeleteProductCollectionModal } from './DeleteProductCollectionModal';
import { EditProductCollectionModal } from './EditProductCollectionModal';
import { DetailProductCollectionModal } from './DetailProductCollectionModal';

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

export const ProductCollectionsList = () => {
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
    const [selectedCollection, setSelectedCollection] = useState<ProductCollection | null>(null);

    const collectionQuery = useProductCollections();
    const collections = collectionQuery.data ?? [];

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

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

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

    const onDelete = (collection: ProductCollection) => {
        setSelectedCollection(collection);
        setIsDeleteModalOpen(true);
    };

    const onEdit = (collection: ProductCollection) => {
        setSelectedCollection(collection);
        setIsEditModalOpen(true);
    };

    const onView = (collection: ProductCollection) => {
        setSelectedCollection(collection);
        setIsDetailModalOpen(true);
    };

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

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

            <DeleteProductCollectionModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} collectionId={selectedCollection?.id || 0} />
            <EditProductCollectionModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} collection={selectedCollection} />
            <DetailProductCollectionModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} collection={selectedCollection} />
        </>
    );
};
