import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { DotsThreeVertical } from "@phosphor-icons/react";
import { cn } from "../../lib/cn";
import { IconButton } from "../actions/icon-button";
import { Menu, type MenuItem } from "../actions/menu";

export type DataRowAction<T> = Omit<MenuItem, "onSelect"> & {
  onClick: (row: T) => void;
};

export function RowActions<T>({
  actions,
  row,
}: {
  actions: DataRowAction<T>[];
  row: T;
}) {
  const containerRef = useRef<HTMLDivElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ left: 0, top: 0 });

  function updateMenuPosition() {
    const bounds = containerRef.current?.getBoundingClientRect();
    if (!bounds) {
      return;
    }

    setMenuPosition({
      left: bounds.right,
      top: bounds.bottom + 6,
    });
  }

  useEffect(() => {
    function handlePointerDown(event: globalThis.PointerEvent) {
      const target = event.target as Node;
      if (!containerRef.current?.contains(target) && !menuRef.current?.contains(target)) {
        setOpen(false);
      }
    }

    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpen(false);
      }
    }

    window.addEventListener("pointerdown", handlePointerDown);
    window.addEventListener("keydown", handleEscape);
    return () => {
      window.removeEventListener("pointerdown", handlePointerDown);
      window.removeEventListener("keydown", handleEscape);
    };
  }, []);

  useEffect(() => {
    if (!open) {
      return;
    }

    updateMenuPosition();
    window.addEventListener("resize", updateMenuPosition);
    window.addEventListener("scroll", updateMenuPosition, true);
    return () => {
      window.removeEventListener("resize", updateMenuPosition);
      window.removeEventListener("scroll", updateMenuPosition, true);
    };
  }, [open]);

  const portalRoot = typeof document !== "undefined"
    ? document.querySelector<HTMLElement>("[data-uhuru-root]") ?? document.body
    : null;

  return (
    <div className="relative inline-flex" ref={containerRef}>
      <IconButton
        icon={<DotsThreeVertical weight="bold" />}
        label="Row actions"
        onClick={(event) => {
          event.stopPropagation();
          setOpen((current) => !current);
        }}
        tone="ghost"
      />
      {open && portalRoot
        ? createPortal(
            <div
              className="fixed z-[60] min-w-56 -translate-x-full origin-top-right overflow-hidden rounded-[min(var(--uhuru-radius-lg),1rem)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] shadow-[var(--uhuru-shadow-md)]"
              ref={menuRef}
              style={{ left: menuPosition.left, top: menuPosition.top }}
            >
              <Menu
                items={actions.map((action) => ({
                  ...action,
                  onSelect: () => {
                    action.onClick(row);
                    setOpen(false);
                  },
                }))}
              />
            </div>,
            portalRoot,
          )
        : null}
    </div>
  );
}