import React, { useState, useEffect, useMemo, memo } from 'react'
import { useSelector } from 'react-redux'
import {
    flexRender,
    getCoreRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    useReactTable,
} from '@tanstack/react-table'
import './EmployeeList.css'

const simpleSearch = (rows, columns, query) => {
    if (!query) {
        return rows
    }

    return rows.filter((row) => {
        return columns.some((column) => {
            const value = row.values[column.accessor]
            return String(value).toLowerCase().includes(query.toLowerCase())
        })
    })
}

const Pagination = ({ table }) => (
    <div className="pagination-controls flex items-center gap-2">
        <button
            className="border rounded p-1"
            onClick={() => table.setPageIndex(0)}
            disabled={!table.getCanPreviousPage()}
        >
            {'<<'}
        </button>
        <button
            className="border rounded p-1"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
        >
            {'<'}
        </button>
        <button
            className="border rounded p-1"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
        >
            {'>'}
        </button>
        <button
            className="border rounded p-1"
            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
            disabled={!table.getCanNextPage()}
        >
            {'>>'}
        </button>
        <span className="flex items-center gap-1">
            <div>Page</div>
            <strong>
                {table.getState().pagination.pageIndex + 1} of{' '}
                {table.getPageCount()}
            </strong>
        </span>
        <div className="select-container">
            <span className="flex items-center gap-1">
                Go to page:
                <input
                    type="number"
                    defaultValue={table.getState().pagination.pageIndex + 1}
                    onChange={(e) => {
                        const page = e.target.value
                            ? Number(e.target.value) - 1
                            : 0
                        table.setPageIndex(page)
                    }}
                    className="border p-1 rounded w-16"
                />
            </span>
            <select
                value={table.getState().pagination.pageSize}
                onChange={(e) => {
                    table.setPageSize(Number(e.target.value))
                }}
            >
                {[10, 20, 30, 40, 50].map((pageSize) => (
                    <option key={pageSize} value={pageSize}>
                        Show {pageSize}
                    </option>
                ))}
            </select>
        </div>
    </div>
)

const EmployeeTableHeader = ({ table }) => (
    <thead>
        {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                    <th key={header.id}>
                        {header.isPlaceholder ? null : (
                            <div
                                {...{
                                    className: header.column.getCanSort()
                                        ? 'cursor-pointer select-none'
                                        : '',
                                    onClick:
                                        header.column.getToggleSortingHandler(),
                                }}
                            >
                                {flexRender(
                                    header.column.columnDef.header,
                                    header.getContext()
                                )}
                                {{
                                    asc: ' 🔼',
                                    desc: ' 🔽',
                                }[header.column.getIsSorted()] ?? null}
                            </div>
                        )}
                    </th>
                ))}
            </tr>
        ))}
    </thead>
)

const EmployeeTableBody = ({ table }) => (
    <tbody>
        {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
                {row.getVisibleCells().map((cell) => (
                    <td key={cell.id}>
                        {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext()
                        )}
                    </td>
                ))}
            </tr>
        ))}
    </tbody>
)

const DebouncedInput = ({
    value: initialValue,
    onChange,
    debounce = 500,
    ...props
}) => {
    const [value, setValue] = useState(initialValue)

    useEffect(() => {
        setValue(initialValue)
    }, [initialValue])

    useEffect(() => {
        const timeout = setTimeout(() => {
            onChange(value)
        }, debounce)

        return () => clearTimeout(timeout)
    }, [value, debounce, onChange])

    return (
        <input
            {...props}
            value={value}
            onChange={(e) => setValue(e.target.value)}
        />
    )
}

const EnhancedDebouncedInput = memo(DebouncedInput)

export default function EmployeeTable() {
    const employees = useSelector((state) => state.employee.employees)
    const [sorting, setSorting] = useState([])
    const [globalFilter, setGlobalFilter] = useState('')

    const columns = useMemo(
        () => [
            {
                accessorKey: 'firstName',
                accessor: 'firstName',
                header: 'First Name',
                enableGlobalFilter: true,
            },
            {
                accessorKey: 'lastName',
                accessor: 'lastName',
                header: 'Last Name',
                enableGlobalFilter: true,
            },
            {
                accessorKey: 'dateOfBirth',
                accessor: 'dateOfBirth',
                header: 'Date of Birth',
                enableGlobalFilter: true,
            },
            {
                accessorKey: 'startDate',
                accessor: 'startDate',
                header: 'Start Date',
                enableGlobalFilter: true,
            },
            {
                accessorKey: 'department',
                accessor: 'department',
                header: 'Department',
                enableGlobalFilter: true,
            },
            {
                accessorKey: 'street',
                accessor: 'street',
                header: 'Street',
                enableGlobalFilter: true,
            },
            {
                accessorKey: 'city',
                accessor: 'city',
                header: 'City',
                enableGlobalFilter: true,
            },
            {
                accessorKey: 'state',
                accessor: 'state',
                header: 'State',
                enableGlobalFilter: true,
            },
            {
                accessorKey: 'zipCode',
                accessor: 'zipCode',
                header: 'Zip Code',
                enableGlobalFilter: true,
            },
        ],
        []
    )

    const table = useReactTable({
        data: employees,
        columns,
        globalFilterFn: simpleSearch,
        state: {
            sorting,
            globalFilter,
        },
        enableGlobalFilter: true,
        getColumnCanGlobalFilter: true,
        onSortingChange: setSorting,
        onGlobalFilterChange: setGlobalFilter,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
        getSortedRowModel: getSortedRowModel(),
    })

    return (
        <div>
            <a href="/add-employee">Add an employee</a>
            <EnhancedDebouncedInput
                value={globalFilter ?? ''}
                onChange={setGlobalFilter}
            />
            <table>
                <EmployeeTableHeader table={table} />
                <EmployeeTableBody table={table} />
            </table>
            <Pagination table={table} />
        </div>
    )
}