import {
  Popover,
  List,
  ListItemButton,
  ListItemText,
  ListItemIcon,
  Switch,
} from "@mui/material";
import { Header } from "@tanstack/react-table";
import {
  UpArrow,
  DownArrow,
  HideIcon,
  IconPinOffOutline,
  IconPinOutline,
} from "../../../assets/svg";
import {
  craftTableFilterSettingsOptionsProps,
  CraftTableOptionsProps,
} from "../../types/table-options";
import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";

type Props<T> = {
  anchorEl: HTMLElement | null;
  activeTab?: string;
  onClose: () => void;
  header: Header<T, unknown>;
  tableStates: CraftTableOptionsProps;
  filterSettingStates?: craftTableFilterSettingsOptionsProps;
  onSaveSettings?: (columnId: string) => void;
};

function TableHeadPopover<T>({
  anchorEl,
  onClose,
  header,
  tableStates,
  onSaveSettings,
}: Props<T>) {
  const open = Boolean(anchorEl);
  const column = header.column;
  const isPinned = column.getIsPinned() === "left";
  const { container: fullscreenContainer } = useFullscreenPopoverContainer();
  const { wrapColumns, setWrapColumns } = tableStates;

  const toggleWrapForColumn = (columnId: string) => {
    setWrapColumns((prev: Record<string, boolean>) => ({
      ...prev,
      [columnId]: !prev[columnId],
      all_wrap: false,
    }));
  };
  const handleUpdateSettings = (columnId: string) => {
    onSaveSettings && onSaveSettings(columnId);
  };

  return (
    <Popover
      open={open}
      anchorEl={anchorEl}
      onClose={onClose}
      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
      container={fullscreenContainer}
    >
      <List dense>
        <ListItemButton onClick={() => column.toggleSorting(false)}>
          <ListItemIcon>
            <UpArrow />
          </ListItemIcon>
          <ListItemText primary="Sort ascending" />
        </ListItemButton>
        <ListItemButton onClick={() => column.toggleSorting(true)}>
          <ListItemIcon>
            <DownArrow />
          </ListItemIcon>
          <ListItemText primary="Sort descending" />
        </ListItemButton>
        <ListItemButton onClick={() => handleUpdateSettings(column?.id)}>
          <ListItemIcon>
            <HideIcon />
          </ListItemIcon>
          <ListItemText primary="Hide in view" />
        </ListItemButton>
        <ListItemButton
          onClick={() => {
            column.pin(isPinned ? false : "left");
          }}
        >
          <ListItemIcon>
            {isPinned ? <IconPinOffOutline /> : <IconPinOutline />}
          </ListItemIcon>
          <ListItemText
            primary={isPinned ? "Unfreeze column" : "Freeze column"}
          />
        </ListItemButton>

        <ListItemButton>
          <ListItemText primary="Wrap Cell" />
          <Switch
            checked={wrapColumns.all_wrap || wrapColumns[column.id]}
            onChange={() => toggleWrapForColumn(column.id)}
          />
        </ListItemButton>
      </List>
    </Popover>
  );
}

export default TableHeadPopover;