import React, {
  createContext,
  forwardRef,
  ReactElement,
  ReactNode,
  useContext,
  useMemo,
  useState,
} from "react";
import classNames from "classnames";
import { Popover } from "../Popover";
import { Icon, ICON_TYPE } from "../Icon";
import { MenuItem } from "./MenuItem";
import { PopperPlacement } from "../../types";

type MenuItemMenuContextType = {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
};

const MenuItemMenuContext = createContext<MenuItemMenuContextType>({
  isOpen: false,
  setIsOpen: () => undefined,
});

export const useMenuItemMenuContext = () => {
  return useContext(MenuItemMenuContext);
};

export const MenuItemMenuCaretIcon = ({
  className,
}: {
  className?: string;
}) => {
  return (
    <Icon
      className={classNames(
        "text-gray-600 text-h5 w-[5px] ml-auto group-hover/menu-item:text-gray-800 transition-colors",
        className,
      )}
      icon={ICON_TYPE.CARET_RIGHT}
    />
  );
};

export const MenuItemMenuReference = forwardRef<
  HTMLDivElement,
  {
    children: ReactNode;
    onClick?: () => void;
    isSelected?: boolean;
    isHighlighted?: boolean;
    disabled?: boolean;
    className?: string;
  }
>(
  (
    {
      children,
      onClick,
      isSelected = false,
      isHighlighted = false,
      disabled = false,
      className,
    },
    ref,
  ) => {
    const { setIsOpen } = useMenuItemMenuContext();

    const onMouseEnter = () => {
      if (!disabled) {
        setIsOpen(true);
      }
    };

    const onMouseLeave = () => {
      if (!disabled) {
        setIsOpen(false);
      }
    };

    return (
      <MenuItem
        ref={ref}
        className={classNames("group/menu-item", className)}
        onClick={onClick}
        isSelected={isSelected}
        isHighlighted={isHighlighted}
        disabled={disabled}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        {children}
      </MenuItem>
    );
  },
);

export const MenuItemMenuRoot = ({
  referenceElement,
  children,
  placement = "right-start",
  popperModifiers = [],
  className,
}: {
  referenceElement: ReactElement<any>;
  children: ReactNode;
  placement?: PopperPlacement;
  popperModifiers?: Record<string, unknown>[];
  className?: string;
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const defaultOffsetModifier = [
    {
      name: "offset",
      options: {
        offset: [0, 0],
      },
    },
  ];
  const contextValue = useMemo(() => ({ isOpen, setIsOpen }), [
    isOpen,
    setIsOpen,
  ]);
  return (
    <MenuItemMenuContext.Provider value={contextValue}>
      <Popover
        removePadding
        className={classNames(
          "block !bg-transparent shadow-none rounded-none pl-2 pr-4 py-4 -mt-4",
          className,
        )}
        isVisible={isOpen}
        placement={placement}
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
        popperModifiers={[...defaultOffsetModifier, ...popperModifiers]}
        referenceElement={referenceElement}
      >
        {children}
      </Popover>
    </MenuItemMenuContext.Provider>
  );
};