import { ColumnOrderState, flexRender, Table } from "@tanstack/react-table";
import {
  CraftTableFeatureProps,
  CraftTableOptionsProps,
} from "../types/table-options";
import { DownArrow, UpArrow } from "../assets/svg";
import { CSSProperties, useState } from "react";
import {
  getColumnAlignment,
  getColumnPinningStyles,
} from "../libs/utils/common";
import { align } from "../types/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";

interface TableHeadProps<T> {
  table: Table<T>;
  featureOptions: CraftTableFeatureProps;
  columnOrder: ColumnOrderState;
  tableStates: CraftTableOptionsProps;
}

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

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

  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl((prev) => (prev ? null : event.currentTarget));
  };

  return (
    <thead className={`ts__head ${stickyHeader ? "ts--sticky" : ""}`.trim()}>
      {table.getHeaderGroups().map((headerGroup) => (
        <tr className="ts__head__tr" key={headerGroup?.id}>
          {enableRowSelection && (
            <th
              className="ts__head__th ts__head__checkbox"
              style={{
                position: "sticky",
                left: 0,
                width: "50px",
              }}
            >
              <div className="ts__content">
                <Checkbox
                  checked={table.getIsAllRowsSelected()}
                  indeterminate={table.getIsSomeRowsSelected()}
                  onChange={() => table.toggleAllRowsSelected()}
                />
              </div>
            </th>
          )}

          {headerGroup.headers.map((header) => {
            let sortProps: {
              className: string;
              title?: string;
              style?: CSSProperties;
            } = {
              className: "ts__content",
              style: {
                justifyContent: getColumnAlignment(
                  (header?.column?.columnDef?.meta as align)?.align
                ),
              },
            };

            // if (header.column.getCanSort()) {
            //   sortProps = {
            //     ...sortProps,
            //     title:
            //       header.column.getNextSortingOrder() === "asc"
            //         ? "Sort ascending"
            //         : header.column.getNextSortingOrder() === "desc"
            //         ? "Sort descending"
            //         : "Clear sort",
            //   };
            // }

            return enableColumnReordering ? (
              <SortableContext
                key={header?.id}
                items={columnOrder}
                strategy={horizontalListSortingStrategy}
              >
                <DraggableTableHeader
                  header={header}
                  featureOptions={featureOptions}
                  tableStates={tableStates}
                />
              </SortableContext>
            ) : (
              <th
                key={header?.id}
                className="ts__head__th"
                colSpan={header.colSpan}
                style={{
                  ...getColumnPinningStyles(header.column),
                  width: `${header.column.getSize()}px`,
                  minWidth: `${header.column.columnDef.minSize}px`,
                  maxWidth: `${header.column.columnDef.maxSize}px`,
                }}
                onClick={handleHover}
              >
                {header.isPlaceholder ? null : (
                  <div {...sortProps}>
                    <div
                      className={`${
                        header.column.getCanSort() ? "ts__content__sort" : ""
                      }`.trim()}
                      // onClick={header.column.getToggleSortingHandler()}
                    >
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}

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

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

                {/* column resizing */}
                {header.column.getCanResize() ? (
                  <div
                    onDoubleClick={() => header.column.resetSize()}
                    onMouseDown={header.getResizeHandler()}
                    onTouchStart={header.getResizeHandler()}
                    className={`column__resize ${
                      header.column.getIsResizing() ? "is__resizing" : ""
                    }`}
                  />
                ) : null}

                {/* Popover */}
                {/* <TableHeadPopover
                  anchorEl={anchorEl}
                  onClose={handleClose}
                  header={header}
                  wrap={wrap}
                  tableStates={tableStates}
                /> */}
              </th>
            );
          })}
        </tr>
      ))}
    </thead>
  );
}

export default TableHead;