Untitled

"use client"
import React, { useMemo, useState } from 'react'
import Pagination from '@/src/components/Pagination';
import Table from '@/src/components/Table'
import Title from '@/src/components/Title';
import { useSupplier } from '@/src/hooks/useSupplierAPI';
import { SearchInput } from '@/src/components/SearchInput/SearchInput';



type Props = {
    columns: string[];
};

type CollegementoArticoli = {
    id: number;
    supplierID: string;
    supplierName: string;
    undefArticles: string;
    assignedArticles: number;
};


type ColumnDefinitionType<T> = {
    key: keyof T;
    label: string;
    header: string;
    width?: number;
};

const filterData = (data: CollegementoArticoli[], searchTerm: string) => {
    return data.filter(item =>
        item.supplierID.toLowerCase().includes(searchTerm.toLowerCase())
    );
};

const Articoli: React.FC<Props> = (props) => {

    const [currentPage, setCurrentPage] = useState(0);
    const [searchTerm, setSearchTerm] = useState('');
    const { data } = useSupplier();

    const filteredData = useMemo(() => filterData(data, searchTerm), [data, searchTerm])

    const handleSearch = (searchValue: string) => {
        setSearchTerm(searchValue);
        setCurrentPage(0);
    };


    const { columns } = props;

    const defaultColumns: Array<ColumnDefinitionType<CollegementoArticoli>> = [
        { key: 'supplierID', label: 'Fornitori', header: 'Fornitori' },
        { key: 'supplierName', label: 'Analizzare', header: 'Analizzare' },
        { key: 'undefArticles', label: 'Assegnati', header: 'Assegnati' },
        { key: 'assignedArticles', label: 'Fatturato Value', header: 'Fatturato Value' }
    ];

    return (
        <div style={{ width: "95%" }}>
            <Title Title={'Collegamento Articoli'} />
            <SearchInput defaultValue={searchTerm} onChange={handleSearch} />
            <Table
                data={filteredData}
                pageNumber={currentPage}
                pageSize={5}
                columns={columns && columns.length > 0 ? columns : defaultColumns}
            />
            <Pagination pageSize={5} currentPage={currentPage} items={filteredData.length} onPageChange={function (page: number): void {
                setCurrentPage(page)
            }} />
        </div>
    )
}

export default Articoli