import { flexRender } from "@tanstack/react-table";
import { useSortable } from "@dnd-kit/sortable";
import { useState } from "react";
import { CSS } from "@dnd-kit/utilities";
import { DownArrow, DragHandleIcon, UpArrow } from "../../../assets/svg";
import { getColumnPinningStyles } from "../../libs/utils/common";
import { TableHeaderProps } from "../../types/table";
import TableHeadPin from "./table-head-pin";
import TableHeadPopover from "./table-head-popover";
import TableColumnResizeHandle from "./table-head-resizer";
import {
  TableDndButton,
  TableHeadCell,
  TableHeadContent,
  TableHeadSort,
} from "./table-head.styles";
import { Box } from "@mui/material";

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

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

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

    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();

  return (
    <TableHeadCell
      onMouseLeave={handleClose}
      colSpan={header.colSpan}
      compact={featureOptions?.compactTable}
      isDragging={isDragging}
      isPinned={Boolean(isPinned)}
      style={{
        width: `${header.column.getSize()}px`,
        minWidth: `${header.column.columnDef.minSize ?? 180}px`,
        maxWidth: `${header.column.columnDef.maxSize}px`,
        transform: CSS.Translate.toString(transform),
        transition: "width transform 0.2s ease-in-out",
        ...getColumnPinningStyles(header.column),
      }}
    >
      {header.isPlaceholder ? null : (
        <TableHeadContent onClick={handleMenuToggle}>
          <TableHeadSort sortable={header.column.getCanSort()}>
            {flexRender(header.column.columnDef.header, header.getContext())}
          </TableHeadSort>

          <Box
            display={"flex"}
            alignItems={"center"}
            justifyContent={"center"}
            gap={0.5}
          >
            {{
              asc: <UpArrow />,
              desc: <DownArrow />,
            }[header.column.getIsSorted() as "asc" | "desc"] ?? null}

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

            <TableDndButton {...attributes} {...listeners}>
              <DragHandleIcon />
            </TableDndButton>
          </Box>
        </TableHeadContent>
      )}

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

      {/* Popover */}
      <TableHeadPopover
        anchorEl={anchorEl}
        activeTab={activeTab}
        onClose={handleClose}
        header={header}
        tableStates={tableStates}
        onSaveSettings={onSaveSettings}
      />
    </TableHeadCell>
  );
}

export default DraggableTableHeader;