import { flexRender } from "@tanstack/react-table";
import { useSortable } from "@dnd-kit/sortable";
import { CSSProperties, useState } from "react";
import { CSS } from "@dnd-kit/utilities";
import { DownArrow, DragHandleIcon, UpArrow } from "../assets/svg";
import {
  getColumnAlignment,
  getColumnPinningStyles,
} from "../libs/utils/common";
import { align } from "../types/common";
import { TableHeaderProps } from "../types/table";
import TableHeadPin from "./table-head-pin";
import TableHeadPopover from "./table-head-popover";

function DraggableTableHeader<T>({
  header,
  featureOptions,
  tableStates,
}: TableHeaderProps<T>) {
  const { enableColumnPinning } = featureOptions;

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

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  const { isDragging, transform, attributes, listeners } = useSortable({
    id: header.column.id,
  });

  const isPinned = header.column.getIsPinned();

  const styles: CSSProperties = {
    opacity: isDragging ? 0.8 : 1,
    position: "relative",
    transform: CSS.Translate.toString(transform),
    transition: "width transform 0.2s ease-in-out",
    width: header.column.getSize(),
    minWidth: `${header.column.columnDef.minSize ?? 180}px`,
    maxWidth: `${header.column.columnDef.maxSize}px`,
  };

  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 (
    <th
      onMouseLeave={handleClose}
      key={header?.id}
      className="ts__head__th"
      colSpan={header.colSpan}
      onClick={handleHover}
      style={{
        width: `${header.column.getSize()}px `,
        minWidth: `${header.column.columnDef.minSize}px`,
        maxWidth: `${header.column.columnDef.maxSize}px`,
        ...styles,
        ...getColumnPinningStyles(header.column),
        zIndex: isPinned ? 3 : isDragging ? 1 : 0,
      }}
    >
      {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 {...attributes} {...listeners} className="ts__dnd__button">
            <DragHandleIcon />
          </div>
        </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}
        tableStates={tableStates}
      />
    </th>
  );
}

export default DraggableTableHeader;