import React from 'react';
import classnames from 'classnames';

import ContextMenuItem from './item';

export interface ContextMenuProp {
  className?: string;
  style?: React.CSSProperties;
  children: React.ReactNode;
}

export default function ContextMenu({ className, style, children }: ContextMenuProp) {
  const [menuVisible, setMenuVisible] = React.useState<boolean>(false);
  const [menuStyle, setmMenuStyle] = React.useState<React.CSSProperties>({});

  return (
    <>
      <div
        style={style}
        onContextMenu={(event) => {
          setMenuVisible(true);
          setmMenuStyle({
            top: event.clientY + 4,
            left: event.clientX + 4,
          });
        }}>
        {children}
      </div>
      {menuVisible && (
        <div className={classnames('fixed w-30 bg-[red] z-1000', className)} style={menuStyle}>
          ContextMenu
        </div>
      )}
    </>
  );
}

ContextMenu.prototype.Item = ContextMenuItem;