import React, { FC } from 'react';
import {
    Cell,
    Column,
    ColumnInstance,
    HeaderGroup,
    Row,
    useFlexLayout,
    useResizeColumns,
    useRowSelect,
    useSortBy,
    useTable
} from 'react-table';
import { TableFooter }    from './components/Footer/table-footer.component';
import { TableFooterRow } from './components/Footer/table-footer-row.component';
import { TableHead }      from './components/Header/table-header.component';
import { TableHeaderRow } from './components/Header/table-header-row.component';
import { TableBody }      from './components/table-body.component';
import { TableCell }      from './components/table-cell.component';
import { TableRow }       from './components/table-row.component';
import { tableClassName } from './utils';
import './table.components.scss';

const className = tableClassName;

export interface DataType {
  [key: string]: any;
}

type TablePropsType = {
    columns: Column<DataType>[];
    data: DataType[];
    className?: string;

    minWidth?: number;
    width?: number;
    maxWidth?: number;

    usePagination?: boolean;
    useSelection?: boolean;
    useSorting?: boolean;
    noHeader?: boolean;
    noFooter?: boolean;
    stickyHeader?: boolean;

    loadNext?: () => void;
    getTableHeight?: () => void;
    onHeaderClick?: (column: Column) => void;
};

export const Table: FC<TablePropsType> = React.memo(
    ({
        columns,
        data,
        // useSelection,
        // usePagination,
        // width,
        // minWidth,
        // maxWidth,
        useSorting,
        noHeader,
        noFooter,
        stickyHeader
    }) => {
        const getTableHooks = () => {
            const hooks = [ useFlexLayout, useResizeColumns, useRowSelect ];

            if (useSorting) {
                return [ useSortBy, ...hooks ];
            }

            return hooks;
        };

        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            footerGroups,
            rows,
            prepareRow
        } = useTable<DataType>(
            {
                columns,
                data
            },
            ...getTableHooks()

            // (hooks: Hooks<DataType>) => {
            //     if (useSelection) {
            //         hooks.flatColumns.push((_columns: Column[]) => [
            //             {
            //                 id:       'selection',
            //                 minWidth: 48,
            //                 width:    0,
            //                 Header:   ({ getToggleAllRowsSelectedProps }: {
            //                     getToggleAllRowsSelectedProps: Function;
            //                 }) => (
            //                     <div
            //                         className={ className('checkbox', { selected: getToggleAllRowsSelectedProps().isSelected }) }
            //                     >
            //                         <Checkbox
            //                             onChange={ (val) => getToggleAllRowsSelectedProps().onChange({ target: { value: val } }) }
            //                             checked={ getToggleAllRowsSelectedProps().checked }
            //                         />
            //                     </div>
            //                 ),
            //                 // @ts-ignore
            //                 Cell: ({ row }): { [key: string]: any } => (
            //                     <div
            //                         className={ className('checkbox', { selected: row.isSelected }) }
            //                     >
            //                         <Checkbox
            //                             onChange={ (val) => row
            //                                 .getToggleRowSelectedProps()
            //                                 .onChange({ target: { value: val } }) }
            //                             checked={ row.getToggleRowSelectedProps().checked }
            //                         />
            //                     </div>
            //                 )
            //             },
            //             ..._columns
            //         ]);
            //     }
            // }
        );

        return (
            <div
                { ...getTableProps() }
                className={ className() }
            >
                { !noHeader && (
                    <TableHead
                        padding='lg'
                        stickyHeader={ stickyHeader }
                    >
                        { headerGroups.map((headerGroup: HeaderGroup) => (
                            <TableHeaderRow
                                key={ headerGroup.id }
                                headerRowProps={ headerGroup.getHeaderGroupProps() }
                            >
                                { (headerGroup.headers as ColumnInstance[]).map((column) => (
                                    <TableCell
                                        key={ column.id }
                                        cellProps={ column.getHeaderProps() }
                                    >
                                        { column.render('Header') }
                                    </TableCell>
                                )) }
                            </TableHeaderRow>
                        )) }
                    </TableHead>
                ) }

                <TableBody
                    padding='lg'
                    tBodyProps={ getTableBodyProps() }
                >
                    { /* { usePagination && !!tableHeight && (
                        <FixedSizeList
                            style={ { minWidth: '100%' } }
                            height={ tableHeight }
                            itemData={ rowsData }
                            overscanCount={ 10 }
                            width="auto"
                            itemCount={ rows.length }
                            itemSize={ 61 }
                        >
                            { RenderRow }
                        </FixedSizeList>
                    ) } */ }

                    { /* { !usePagination */ }
                    { rows.map((row: Row<DataType>) => {
                        prepareRow(row);
                        return (
                            <TableRow key={ row.id } rowProps={ row.getRowProps() }>
                                { row.cells.map((cell: Cell<DataType>) => (
                                    <TableCell
                                        key={ cell.getCellProps().key }
                                        cellProps={ cell.getCellProps() }
                                    >
                                        { cell.render('Cell') }
                                    </TableCell>
                                )) }
                            </TableRow>
                        );
                    }) }
                </TableBody>

                { !noFooter && (
                    <TableFooter padding='lg'>
                        {
                            footerGroups.map((footerGroup) => (
                                <TableFooterRow
                                    key={ footerGroup.id }
                                    footerRowProps={ footerGroup.getFooterGroupProps() }
                                >
                                    { (footerGroup.headers as ColumnInstance[]).map((column) => (
                                        <TableCell
                                            key={ column.id }
                                            cellProps={ column.getFooterProps() }
                                        >
                                            { column.render('Footer') }
                                        </TableCell>
                                    )) }
                                </TableFooterRow>
                            ))
                        }
                    </TableFooter>
                ) }
            </div>
        );
    }
);