import { DataTable } from 'mantine-datatable';
import { useProductColours } from '../api/getProductColours';
import { productColourColumns } from './Columns';
import { useState } from 'react';
import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
import { ProductColourListHeader } from './ProductColourListHeader';
import { ProductColour } from '../types/api';
import { DeleteProductColourModal } from './DeleteProductColourModal';
import { EditProductColourModal } from './EditProductColourModal';
import { DetailProductColourModal } from './DetailProductColourModal';

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

export const ProductColoursList = () => {
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
    const [selectedColour, setSelectedColour] = useState<ProductColour | null>(null);

    const colourQuery = useProductColours();
    const colours = colourQuery.data ?? [];

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

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

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

    const onDelete = (colour: ProductColour) => {
        setSelectedColour(colour);
        setIsDeleteModalOpen(true);
    };

    const onEdit = (colour: ProductColour) => {
        setSelectedColour(colour);
        setIsEditModalOpen(true);
    };

    const onView = (colour: ProductColour) => {
        setSelectedColour(colour);
        setIsDetailModalOpen(true);
    };

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

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

            <DeleteProductColourModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} colourId={selectedColour?.id || 0} />
            <EditProductColourModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} colour={selectedColour} />
            <DetailProductColourModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} colour={selectedColour} />
        </>
    );
};
