import { flexRender, getCoreRowModel, SortingState, useReactTable } from "@tanstack/react-table"
import { ArrowDown2, ArrowUp2, SearchNormal1 } from "iconsax-react"
import { FC } from "react"
import { Input } from "./input"
import { ComboBox } from "./combo-box"

type Props = {
    columns: any
    data: any
    sorting: SortingState,
    setSorting: React.Dispatch<React.SetStateAction<SortingState>>,
    tableStatus?: string | number
}

export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStatus }) => {

    const table = useReactTable({
        data: data ? data : [],
        columns: columns ? columns : [],
        debugTable: true,
        getCoreRowModel: getCoreRowModel(),
        enableColumnResizing: true,
        columnResizeMode: 'onChange',
        debugHeaders: true,
        debugColumns: true,
        state: {
            sorting
        },
        onSortingChange: setSorting,
    })

    return (
        <div className="flex flex-col gap-10">
            <div className="flex flex-col sm:flex-row justify-between items-center gap-2.5 md:gap-10">
                <div className="sm:max-w-[300px] xl:max-w-[450px] w-full">
                    <Input placeholder="جستجو" className="bg-auth-form placeholder:text-[#777577]" icon={<SearchNormal1 color="#777577" />} />
                </div>
                <div className="w-full sm:max-w-[100px]">
                    <ComboBox placeholder="100" className="bg-auth-form" />
                </div>
            </div>
            <div className="block max-w-full overflow-x-auto overflow-y-hidden bg-auth-form rounded-[40px] shadow-sm p-4 xl:p-9 relative">
                <table>
                    <thead className="border-b border-b-secondary-color">
                        {table.getHeaderGroups().map((headerGroup: any, index: number) => (
                            <tr key={index}>
                                {headerGroup.headers.map((header: any, index: number) => (
                                    <th key={index}>
                                        <div {...{ className: header.column.getCanSort() ? "text-secondary-text-color text-base font-normal flex flex-row items-center justify-center gap-1 px-4 py-2" : "", onClick: header.column.getToggleSortingHandler() }}>
                                            {flexRender(header.column.columnDef.header, header.getContext())}
                                            {{ asc: <ArrowDown2 color="#777577" className="size-4" />, desc: <ArrowUp2 color="#777577" className="size-4" /> }[header.column.getIsSorted() as string] ?? null}
                                        </div>
                                    </th>
                                ))}
                            </tr>
                        ))}
                    </thead>
                    <tbody>
                        {table.getRowModel().rows.map((row: any, index: number) => (
                            <tr key={index}>
                                {row.getVisibleCells().map((cell: any, index: number) => (
                                    <td key={index} className="text-primary-text-color font-normal text-base px-4 py-5 text-center">
                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                    </td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>
                {tableStatus && <div className="absolute text-sm bottom-1.5 lg:left-10 lg:top-5 lg:text-lg text-primary-text-color font-normal">امتیاز من: {tableStatus}</div>}
            </div>
        </div>
    );
}
