import { Context, createContext, useContext } from "react";
import { PopperPlacement } from "../../types";

export type RenderProps = {
  listProps: {
    id: string;
    role: string;
    tabIndex: number;
    "aria-labelledby": string;
  };
  itemProps: {
    tabIndex: number;
    role: string;
  };
  isOpen?: boolean;
  onClose?: () => void;
};

export type MenuContextProps = RenderProps & {
  buttonId?: string;
  menuId?: string;
  onToggle?: (event: Event | React.MouseEvent<HTMLButtonElement>) => void;
  onOpen?: () => void;
  placement?: PopperPlacement;
};

export const defaultContext: MenuContextProps = {
  listProps: {
    id: "",
    role: "menu",
    tabIndex: -1,
    "aria-labelledby": "",
  },
  itemProps: {
    tabIndex: 0,
    role: "menuitem",
  },
  isOpen: false,
  onToggle: () => {},
  onOpen: () => {},
  onClose: () => {},
  buttonId: "",
  menuId: "",
  placement: "bottom-start",
};

export const MenuContext: Context<typeof defaultContext> = createContext<
  typeof defaultContext
>(defaultContext);

export function useMenuContext() {
  const context = useContext<typeof defaultContext>(MenuContext) || {
    ...defaultContext,
  };

  return context;
}