import {
  ColumnOrderState,
  flexRender,
  Header,
  Table,
} from "@tanstack/react-table";
import {
  CraftTableFeatureProps,
  craftTableFilterSettingsOptionsProps,
  CraftTableOptionsProps,
} from "../../types/table-options";
import { DownArrow, UpArrow } from "../../../assets/svg";
import { useState } from "react";
import { getColumnPinningStyles } from "../../libs/utils/common";
import {
  horizontalListSortingStrategy,
  SortableContext,
} from "@dnd-kit/sortable";
import DraggableTableHeader from "./table-head-dnd-cell";
import TableHeadPin from "./table-head-pin";
import Checkbox from "../inputs/checkbox";
import TableColumnResizeHandle from "./table-head-resizer";
import {
  TableHeadCell,
  TableHeadContent,
  TableHeadRoot,
  TableHeadRow,
  TableHeadSort,
} from "./table-head.styles";

interface TableHeadProps<T> {
  table: Table<T>;
  activeTab?: string;
  featureOptions: CraftTableFeatureProps;
  columnOrder: ColumnOrderState;
  tableStates: CraftTableOptionsProps;
  filterSettingStates: craftTableFilterSettingsOptionsProps;
  onSaveSettings?: (columnId: string) => void;
}

function TableHead<T>({
  table,
  activeTab,
  featureOptions,
  columnOrder,
  tableStates,
  filterSettingStates,
  onSaveSettings,
}: TableHeadProps<T>) {
  const {
    stickyHeader,
    enableColumnReordering,
    enableColumnPinning,
    enableRowSelection,
  } = featureOptions;

  // Popover
  const [, setAnchorEl] = useState<HTMLElement | null>(null);

  const handleMenuToggle = (
    event: React.MouseEvent<HTMLElement>,
    header: Header<T, unknown>
  ) => {
    if (header.column.getIsResizing()) return;

    setAnchorEl((prev) => (prev ? null : event.currentTarget));
  };

  return (
    <TableHeadRoot sticky={stickyHeader}>
      {table.getHeaderGroups().map((headerGroup) => (
        <TableHeadRow striped={featureOptions.striped} key={headerGroup?.id}>
          {enableRowSelection && (
            <TableHeadCell
              sticky
              compact={featureOptions.compactTable}
              style={{ width: 50 }}
            >
              <TableHeadContent>
                <Checkbox
                  checked={table.getIsAllRowsSelected()}
                  indeterminate={table.getIsSomeRowsSelected()}
                  onChange={() => table.toggleAllRowsSelected()}
                />
              </TableHeadContent>
            </TableHeadCell>
          )}

          {headerGroup.headers.map((header) => {
            return enableColumnReordering ? (
              <SortableContext
                key={header?.id}
                items={columnOrder}
                strategy={horizontalListSortingStrategy}
              >
                <DraggableTableHeader
                  header={header}
                  activeTab={activeTab}
                  featureOptions={featureOptions}
                  tableStates={tableStates}
                  filterSettingStates={filterSettingStates}
                  onSaveSettings={onSaveSettings}
                />
              </SortableContext>
            ) : (
              <TableHeadCell
                key={header?.id}
                colSpan={header.colSpan}
                compact={featureOptions.compactTable}
                style={{
                  ...getColumnPinningStyles(header.column),
                  width: `${header.column.getSize()}px`,
                  minWidth: `${header.column.columnDef.minSize}px`,
                  maxWidth: `${header.column.columnDef.maxSize}px`,
                }}
              >
                {header.isPlaceholder ? null : (
                  <TableHeadContent
                    onClick={(event) => handleMenuToggle(event, header)}
                  >
                    <TableHeadSort sortable={header.column.getCanSort()}>
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}

                      {{ asc: <UpArrow />, desc: <DownArrow /> }[
                        header.column.getIsSorted() as "asc" | "desc"
                      ] ?? null}
                    </TableHeadSort>

                    {enableColumnPinning && (
                      <TableHeadPin
                        header={header}
                        featureOptions={featureOptions}
                        tableStates={tableStates}
                      />
                    )}
                  </TableHeadContent>
                )}

                {/* column resizing */}
                {header.column.getCanResize() ? (
                  <TableColumnResizeHandle header={header} />
                ) : null}

                {/* Popover */}
                {/* <TableHeadPopover
                  anchorEl={anchorEl}
                  onClose={handleClose}
                  header={header}
                  wrap={wrap}
                  tableStates={tableStates}
                /> */}
              </TableHeadCell>
            );
          })}
        </TableHeadRow>
      ))}
    </TableHeadRoot>
  );
}

export default TableHead;