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

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

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

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

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

    //количество страниц разбиения таблицы
    const n = Math.ceil(dataTable.length / props.amountRows);

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

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

    return (
        <>
            <h4>Filters</h4>
            <Filter filtering={updateDataTable} data={dataTable} fullData={props.data} />


            <h4>Sort by</h4>
            <Sorting data = {dataTable} keys = {Object.keys(props.data[0])}/>

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

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

export default Table;