import React, { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { PropsPartion } from "./ContextMenuItem";
import classNames from "classnames";

type ChildType = React.ReactElement<any & PropsPartion[]>;
type ChildrenType = ChildType[] | ChildType;

type MenuProps = {
  className?: string | undefined;
  button: React.ReactNode;
  children: ChildrenType;
};

/**
 * Context menu component
 * @param {React.ReactNode} children
 * @return {JSX.Element}
 */
export default function ContextMenu({
  button,
  children,
  className,
}: MenuProps) {
  return (
    <Menu as="div" className="relative inline-block text-left">
      {({ open }) => (
        <>
          <div>
            <Menu.Button>{button}</Menu.Button>
          </div>
          <Transition
            as={Fragment}
            show={open}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <Menu.Items
              static
              className={classNames([
                className,
                "bg-serv-500 rounded-lg shadow-xl shadow-black/20 focus:outline-none",
                "py-2 px-4 sm:py-3"
              ])}
            >
              {children}
            </Menu.Items>
          </Transition>
        </>
      )}
    </Menu>
  );
}
