Untitled

"use client"
import React, { useState } from 'react'
import Pagination from '@/app/components/Pagination';
import Table from '@/app/components/Table'
import Title from '@/app/components/Title';
import { useSupplier } from '@/app/hooks/useSupplierAPI';
import { SearchInput } from '@/app/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 Articoli = (props: Props) => {

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


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

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


    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>
            <Title Title={'Collegamento Articoli'} />
            <SearchInput defaultValue={''} onChange={handleSearch} />
            <Table
                data={filterData(data, searchTerm)} // Filtrelenmiş veri kümesini kullan
                pageNumber={currentPage}
                pageSize={5}
                columns={columns && columns.length > 0 ? columns : defaultColumns}
            />
            <Pagination pageSize={5} currentPage={currentPage} items={data.length} onPageChange={function (page: number): void {
                setCurrentPage(page)
            }} />
        </div>
    )
}

export default Articoli