import { useState } from "react";
import TableHead from './TableHead.jsx';
import TableBody from './TableBody.jsx';
import Filter from './Filter.jsx';

/*
   компонент, выводящий на страницу таблицу с пагинацией
   пропсы:
      data - данные для таблицы в виде массива объектов
*/

const Table = (props) => {
    const [activePage, setActivePage] = useState("1");

    const [dataTable, setDataTable] = useState(props.data);
    const updateDataTable = (value) => {
        props.setFilteredDataCallback(value);    
        setDataTable(value);
    };

    const changeActive = (event) => {
        setActivePage(event.target.innerHTML);
    };

    //количество страниц разбиения таблицы
    let n = Math.ceil(dataTable.length / props.amountRows);
    let rowCount = props.amountRows;
    if(props.disablePagination){
        n=1;
        rowCount=dataTable.length;
    }

    // массив с номерами страниц
    const arr = Array.from({ length: n }, (v, i) => i + 1);

    //формируем совокупность span с номерами страниц
    const pages = arr.map((item, index) =>
        <span className={index == (activePage - 1) ? "selected" : ""} key={index} onClick={changeActive}> {item} </span>
    );

    return (
        <>
            <h4>Фильтры</h4>
            <Filter filtering={updateDataTable} data={dataTable} fullData={props.data} />

            <table>
                <TableHead head={Object.keys(props.data[0])} />
                <TableBody body={dataTable} amountRows={rowCount} numPage={activePage} />
            </table>

            {n>1 &&
                <div>
                    {pages}
                </div>
            }
        </>
    )
}

export default Table;