import * as React from 'react';
import { IPoint } from '../../Interfaces/IPoint';
import { MenuItem } from './MenuItem';

interface IMenuProps {
  getListener: () => HTMLElement | null
  actions: Map<string, IMenuAction[]>
  className?: string
}

export interface IMenuAction {
  /** displayed  */
  text: string

  /** function to be called on button click */
  action: (target: HTMLElement) => void
}

function UseMouseEvents(
  getListener: () => HTMLElement | null,
  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
  setContextMenuPosition: React.Dispatch<React.SetStateAction<IPoint>>,
  setTarget: React.Dispatch<React.SetStateAction<HTMLElement | undefined>>
): void {
  React.useEffect(() => {
    function OnContextMenu(event: MouseEvent): void {
      event.preventDefault();
      const contextMenuPosition: IPoint = { x: event.pageX, y: event.pageY };

      setIsOpen(true);
      setContextMenuPosition(contextMenuPosition);
      setTarget(event.target as HTMLElement); // this is wrong since target can be null and not undefined
    }

    function OnLeftClick(): void {
      setIsOpen(false);
    }

    getListener()?.addEventListener(
      'contextmenu',
      OnContextMenu
    );

    window.addEventListener(
      'click',
      OnLeftClick
    );

    return () => {
      getListener()?.removeEventListener(
        'contextmenu',
        OnContextMenu
      );

      window.removeEventListener(
        'click',
        OnLeftClick
      );
    };
  });
}

export function Menu(props: IMenuProps): JSX.Element {
  const [isOpen, setIsOpen] = React.useState(false);
  const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
    x: 0,
    y: 0
  });
  const [target, setTarget] = React.useState<HTMLElement>();

  UseMouseEvents(
    props.getListener,
    setIsOpen,
    setContextMenuPosition,
    setTarget
  );

  const children: JSX.Element[] = [];

  if (target !== undefined) {
    let count = 0;
    for (const className of target.classList) {
      count++;
      const actions = props.actions.get(className);
      if (actions === undefined) {
        continue;
      }

      actions.forEach((action, index) => {
        children.push(<MenuItem
          key={`contextmenu-item-${count}`}
          className="contextmenu-item"
          text={action.text}
          onClick={() => action.action(target)} />);
      });
    };
  }

  // TODO: Fix css
  const visible = isOpen ? 'visible opacity-1' : 'invisible opacity-0';
  return (
    <div
      className={`fixed ${props.className ?? ''} ${visible}`}
      style={{
        left: contextMenuPosition.x,
        top: contextMenuPosition.y
      }}>
      { children }
    </div>
  );
}