import { DataTable } from 'mantine-datatable';
import { useProducts } from '../api/getProducts';
import { productColumns } from './Columns';
import { useState } from 'react';
import { useSortedPaginatedRecords } from '../../../hooks/useSortedPaginatedRecords';
import { ProductListHeader } from './ProductListHeader';
import { DeleteProductModal } from './DeleteproductModal';
import { Product } from '../types/api';
import { EditProductModal } from './EditProductModal';
import { DetailProductModal } from './DetailProductModal';

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

export const ProductsList = () => {
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
    const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);

    const productsQuery = useProducts();
    const products = productsQuery.data ?? [];

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

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

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

    const onDelete = (product: Product) => {
        setSelectedProduct(product);
        setIsDeleteModalOpen(true);
    };

    const onEdit = (product: Product) => {
        setSelectedProduct(product);
        setIsEditModalOpen(true);
    };

    const onView = (product: Product) => {
        setSelectedProduct(product);
        setIsDetailModalOpen(true);
    };

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

                <div className="datatables pagination-padding px-5">
                    <DataTable
                        className="whitespace-nowrap table-hover"
                        records={filteredRecords}
                        columns={productColumns({ onEdit, onView, onDelete })}
                        highlightOnHover
                        minHeight={200}
                        fetching={productsQuery.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>
            <DeleteProductModal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} productId={selectedProduct?.id || 0} />
            <EditProductModal isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} product={selectedProduct} />
            <DetailProductModal isOpen={isDetailModalOpen} onClose={() => setIsDetailModalOpen(false)} product={selectedProduct} />
        </>
    );
};
