import * as React from 'react';
import { useIntl } from 'react-intl';
import { DropdownMenu, TriggerButton } from '@box/blueprint-web';
import { ApprovalTask } from '@box/blueprint-web-assets/icons/Fill';
import { Tasks } from '@box/blueprint-web-assets/icons/MediumFilled';
import messages from './messages';
import { TASK_TYPE_APPROVAL, TASK_TYPE_GENERAL } from '../../constants';
import './AddTaskMenuV2.scss';
const AddTaskMenuV2 = ({
  isDisabled,
  onMenuItemClick,
  setAddTaskButtonRef
}) => {
  const {
    formatMessage
  } = useIntl();
  const [isOpen, setIsOpen] = React.useState(false);
  const handleMenuItemClick = React.useCallback(taskType => {
    // Open the modal first
    onMenuItemClick(taskType);
    // Then close the dropdown. We rely on onCloseAutoFocus to prevent focus restoration.
    setIsOpen(false);
  }, [onMenuItemClick]);
  return /*#__PURE__*/React.createElement(DropdownMenu.Root, {
    open: isOpen,
    onOpenChange: setIsOpen
  }, /*#__PURE__*/React.createElement(DropdownMenu.Trigger, null, /*#__PURE__*/React.createElement(TriggerButton, {
    variant: "secondary",
    disabled: isDisabled,
    ref: setAddTaskButtonRef,
    caretDirection: isOpen ? 'up' : 'down',
    label: formatMessage(messages.tasksAddTask)
  })), /*#__PURE__*/React.createElement(DropdownMenu.Content, {
    align: "end",
    className: "bcs-AddTaskMenu-v-two",
    onCloseAutoFocus: event => {
      // Prevent focus from returning to the trigger button when the menu closes.
      // This allows the Modal (which was just opened) to keep focus on its input field
      // without having it stolen back, which would trigger a blur validation error.
      event.preventDefault();
    }
  }, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
    onClick: () => handleMenuItemClick(TASK_TYPE_GENERAL)
  }, /*#__PURE__*/React.createElement("div", {
    className: "bcs-AddTaskMenu-v-two-menuItem"
  }, /*#__PURE__*/React.createElement("div", {
    className: "bcs-AddTaskMenu-v-two-icon"
  }, /*#__PURE__*/React.createElement(Tasks, {
    color: "black",
    width: 20,
    height: 20
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "bcs-AddTaskMenu-v-two-title"
  }, formatMessage(messages.taskAddTaskGeneral)), /*#__PURE__*/React.createElement("div", {
    className: "bcs-AddTaskMenu-v-two-description"
  }, formatMessage(messages.taskAddTaskGeneralDescription))))), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
    onClick: () => handleMenuItemClick(TASK_TYPE_APPROVAL)
  }, /*#__PURE__*/React.createElement("div", {
    className: "bcs-AddTaskMenu-v-two-menuItem"
  }, /*#__PURE__*/React.createElement("div", {
    className: "bcs-AddTaskMenu-v-two-icon"
  }, /*#__PURE__*/React.createElement(ApprovalTask, {
    color: "black",
    width: 20,
    height: 20
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "bcs-AddTaskMenu-v-two-title"
  }, formatMessage(messages.taskAddTaskApproval)), /*#__PURE__*/React.createElement("div", {
    className: "bcs-AddTaskMenu-v-two-description"
  }, formatMessage(messages.taskAddTaskApprovalDescription)))))));
};
export default AddTaskMenuV2;
//# sourceMappingURL=AddTaskMenuV2.js.map