import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import { useEffect, useState } from 'react';
import sortBy from 'lodash/sortBy';

interface Props {
    data: any[];
    columns: any[];
    enableSelection?: boolean;
    loading?: boolean;
}

const DataTables = ({ data, columns, enableSelection = false, loading = false}: Props) => {
    const PAGE_SIZES = [10, 25, 50, 100];

    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(PAGE_SIZES[1]);
    const [search, setSearch] = useState('');
    const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
        columnAccessor: 'id',
        direction: 'asc',
    });

    const [selectedRecords, setSelectedRecords] = useState<any[]>([]);

    const [filteredData, setFilteredData] = useState<any[]>([]);
    const [sortedData, setSortedData] = useState<any[]>([]);
    const [recordsData, setRecordsData] = useState<any[]>([]);

    const selectionProps = enableSelection
    ? {
          selectedRecords,
          onSelectedRecordsChange: setSelectedRecords,
      }
    : {};
    useEffect(() => {
        const filtered = data.filter((item) =>
            Object.values(item).some((val) =>
                String(val).toLowerCase().includes(search.toLowerCase())
            )
        );

        setFilteredData(filtered);
        setPage(1);
    }, [search, data]);

    // -----------------------------
    // SORTING
    // -----------------------------
    useEffect(() => {
        const sorted = sortBy(filteredData, sortStatus.columnAccessor);

        setSortedData(
            sortStatus.direction === 'desc' ? sorted.reverse() : sorted
        );
    }, [sortStatus, filteredData]);

    useEffect(() => {
        const from = (page - 1) * pageSize;
        const to = from + pageSize;

        setRecordsData(sortedData.slice(from, to));
    }, [page, pageSize, sortedData]);

    return (
        <div className='w-full max-w-full overflow-hidden'>
            <div className="flex justify-end mb-4">
                <input
                    type="text"
                    className="form-input w-64"
                    placeholder="Search..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                />
            </div>
            <div className="w-full overflow-x-auto">
                <DataTable
                    style={{ overflowX: 'auto' }}
                    className="w-full table-fixed"
                    records={recordsData}
                    columns={columns}
                    withBorder={false}
                    highlightOnHover
                    totalRecords={filteredData.length}
                    recordsPerPage={pageSize}
                    page={page}
                    onPageChange={setPage}
                    recordsPerPageOptions={PAGE_SIZES}
                    onRecordsPerPageChange={setPageSize}
                    sortStatus={sortStatus}
                    onSortStatusChange={setSortStatus}
                    minHeight={200}
                    paginationText={({ from, to, totalRecords }) =>
                        `Showing ${from} to ${to} of ${totalRecords} entries`
                    }
                    {...selectionProps}
                />
            </div>
        </div>
    );
};

export default DataTables;