import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { ToolbarButton } from '@ohif/ui';

function NestedMenu({ children, label, icon, isActive }) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleNestedMenu = () => setIsOpen(!isOpen);

  const closeNestedMenu = () => {
    if (isOpen) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    window.addEventListener('click', closeNestedMenu);
    return () => {
      window.removeEventListener('click', closeNestedMenu);
    };
  }, [isOpen]);

  return (
    <ToolbarButton
      id="NestedMenu"
      label={label}
      icon={icon}
      onClick={toggleNestedMenu}
      dropdownContent={isOpen && children}
      isActive={isActive || isOpen}
      type="primary"
    />
  );
}

NestedMenu.propTypes = {
  children: PropTypes.any.isRequired,
  icon: PropTypes.string,
  label: PropTypes.string,
};

NestedMenu.defaultProps = {
  icon: "tool-more-menu",
  label: "More",
};

export default NestedMenu;