import { useDisclosure } from "@chakra-ui/react";
import React, { RefObject, useRef, useState } from "react";

type Props = unknown;

type MousePosition = {
  x: number;
  y: number;
};

type ContextMenuState = {
  isOpen: boolean;
  closeMenu: () => void;
  openMenu: () => void;
  menuRef?: RefObject<HTMLDivElement>;
  position: MousePosition;
  setPosition: React.Dispatch<React.SetStateAction<MousePosition>>;
};

export const ContextMenuContext = React.createContext<ContextMenuState>({
  isOpen: false,
  closeMenu: () => { return; },
  openMenu: () => { return; },
  menuRef: undefined,
  position: { x: 0, y: 0 },
  setPosition: () => { return; },
});

export const ContextMenu: React.FC<Props> = ({ children }) => {
  const { isOpen, onClose: closeMenu, onOpen: openMenu } = useDisclosure();
  const [position, setPosition] = useState<MousePosition>({ x: 0, y: 0 });
  const menuRef = useRef<HTMLDivElement>(null);
  return (
    <ContextMenuContext.Provider
      value={{
        isOpen,
        closeMenu,
        openMenu,
        menuRef,
        position,
        setPosition,
      }}
    >
      {children}
    </ContextMenuContext.Provider>
  );
};