import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
import { Fragment, useState } from 'react';
import { Table, Button, Form, InputGroup } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import Filter from './Filter';

const GroupTable = ({ data, columns}) => {
    const { t } = useTranslation();
    const [sorting, setSorting] = useState([]);
    const [filtering, setFiltering] = useState('');
    const [columnFilters, setColumnFilters] = useState([]);

    const table = useReactTable({
        data: data || [],
        columns: columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        state: {
            sorting: sorting,
            globalFilter: filtering,
            columnFilters: columnFilters,
        },
        onSortingChange: setSorting,
        onGlobalFilterChange: setFiltering,
        onColumnFiltersChange: setColumnFilters,
        columnResizeMode: 'onChange',
        autoResetPageIndex: false,
    });
    return (
        <>
            <div className='d-flex justify-content-between mt-2 mb-2'>
                <div>
                    <InputGroup>
                        <strong className='align-self-center'>{t('Search')}&nbsp;</strong>
                        <Form.Control type='text' value={filtering} onChange={e => setFiltering(e.target.value)} />
                    </InputGroup>
                </div>

                <div>
                    <InputGroup>
                        <strong className='align-self-center'>{t('RowsPerPage')}&nbsp;</strong>
                        <Form.Select value={table.getState().pagination.pageSize} onChange={e => { table.setPageSize(Number(e.target.value)) }}>
                            {[10, 30, 40, 50, 100].map(pageSize => (
                                <option key={pageSize} value={pageSize}>{pageSize}</option>
                            ))}
                        </Form.Select>
                    </InputGroup>
                </div>
            </div>

            <Table striped bordered hover responsive className='align-middle' >
                <thead>
                    {table.getHeaderGroups().map(headerGroup => (
                        <tr key={headerGroup.id}>
                            {headerGroup.headers.map(header => (
                                <th key={header.id} style={{ width: `${header.getSize()}` }}>
                                    {header.isPlaceholder ? null : (
                                        <>
                                            <div {...{ style: { cursor: header.column.getCanSort() ? 'pointer' : '' }, onClick: header.column.getToggleSortingHandler() }}>
                                                {flexRender(
                                                    header.column.columnDef.header,
                                                    header.getContext()
                                                )}
                                                {
                                                    { asc: <i className='mdi mdi-arrow-up-bold text-primary fs-6 middle-align'></i>, desc: <i className='mdi mdi-arrow-down-bold text-primary fs-6 middle-align'></i> }
                                                    [header.column.getIsSorted() ?? null]
                                                }
                                            </div>
                                            {header.column.getCanFilter() ? (
                                                <div>
                                                    <Filter column={header.column} table={table} />
                                                </div>
                                            ) : null}
                                        </>
                                    )}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>

                <tbody>
                    {table.getRowModel().rows.map(row => (
                        <Fragment key={row.id}>
                            {row.original.station.map((station, stationIndex) => (
                                <Fragment key={`${row.id}-${stationIndex}`}>
                                    {station.step.map((step, stepIndex) => (
                                        <tr key={`${row.id}-${stationIndex}-${stepIndex}`}>
                                            {stationIndex === 0 && stepIndex === 0 && (
                                                <Fragment key={`${row.id}-actions`}>
                                                    {flexRender(columns.find(column => column.accessorKey === 'action')?.cell, { row })}
                                                    {flexRender(columns.find(column => column.accessorKey === 'wi_number')?.cell, { row })}
                                                    {flexRender(columns.find(column => column.accessorKey === 'status')?.cell, { row })}
                                                    {flexRender(columns.find(column => column.accessorKey === 'version')?.cell, { row })}
                                                </Fragment>
                                            )}
                                            {stepIndex === 0 && (
                                                <Fragment key={`${row.id}-${stationIndex}-station`}>
                                                    {flexRender(columns.find(column => column.accessorKey === 'station_number')?.cell, { row: { original: station } })}
                                                </Fragment>
                                            )}
                                            {flexRender(columns.find(column => column.accessorKey === 'step_id')?.cell, { row: { original: step } })}
                                            {flexRender(columns.find(column => column.accessorKey === 'description')?.cell, { row: { original: step } })}
                                            {flexRender(columns.find(column => column.accessorKey === 'before_image')?.cell, { row: { original: step } })}
                                        </tr>
                                    ))}
                                </Fragment>
                            ))}
                        </Fragment>
                    ))}
                </tbody>

                {/* <tfoot>
                    {table.getFooterGroups().map(footerGroup => (
                        <tr key={footerGroup.id}>
                        {footerGroup.headers.map(header => (
                            <th key={header.id}>
                            {header.isPlaceholder
                                ? null
                                : flexRender(
                                    header.column.columnDef.header,
                                    header.getContext()
                                )}
                            </th>
                        ))}
                        </tr>
                    ))}
                </tfoot> */}
            </Table>

            <div className='d-flex justify-content-between mt-2'>
                <div style={{ display: 'inline-flex' }}>
                    <div className='tanstack-total-page align-self-center'>
                        <strong>{t('Page')}:&nbsp;</strong>
                        {table.getState().pagination.pageIndex + 1} of{' '}
                        {table.getPageCount()}
                    </div>

                    <div className='flex items-center gap-2'>
                        <InputGroup>
                            <div className='align-self-center'>
                                &nbsp;|&nbsp;{t('GoToPage')}&nbsp;
                            </div>
                            <Form.Control type='number' value={table.getState().pagination.pageIndex + 1} onChange={e => {
                                const page = e.target.value ? Number(e.target.value) - 1 : 0
                                table.setPageIndex(page)
                            }}
                            />
                        </InputGroup>
                    </div>
                </div>
                <div className='d-flex flex-wrap gap-2 mb-lg-0'>
                    <Button variant='primary' onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()}>{'<<'}</Button>
                    <Button variant='primary' onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>{'<'}</Button>
                    <Button variant='primary' onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>{'>'}</Button>
                    <Button variant='primary' onClick={() => table.setPageIndex(table.getPageCount() - 1)} disabled={!table.getCanNextPage()}>{'>>'}</Button>
                </div>
            </div>
        </>
    )
};

export default GroupTable;