"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _a11y = require("@wordpress/a11y");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _dropdownMenu = _interopRequireDefault(require("../../dropdown-menu"));
var _menuGroup = _interopRequireDefault(require("../../menu-group"));
var _menuItem = _interopRequireDefault(require("../../menu-item"));
var _hStack = require("../../h-stack");
var _heading = require("../../heading");
var _hook = require("./hook");
var _context = require("../../context");
var _styles = require("../styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const DefaultControlsGroup = ({
  itemClassName,
  items,
  toggleItem
}) => {
  if (!items.length) {
    return null;
  }
  const resetSuffix = /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ResetLabel, {
    "aria-hidden": true,
    children: (0, _i18n.__)('Reset')
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: items.map(([label, hasValue]) => {
      if (hasValue) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuItem.default, {
          className: itemClassName,
          role: "menuitem",
          label: (0, _i18n.sprintf)(
          // translators: %s: The name of the control being reset e.g. "Padding".
          (0, _i18n.__)('Reset %s'), label),
          onClick: () => {
            toggleItem(label);
            (0, _a11y.speak)((0, _i18n.sprintf)(
            // translators: %s: The name of the control being reset e.g. "Padding".
            (0, _i18n.__)('%s reset to default'), label), 'assertive');
          },
          suffix: resetSuffix,
          children: label
        }, label);
      }
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuItem.default, {
        icon: _icons.check,
        className: itemClassName,
        role: "menuitemcheckbox",
        isSelected: true,
        "aria-disabled": true,
        children: label
      }, label);
    })
  });
};
const OptionalControlsGroup = ({
  items,
  toggleItem
}) => {
  if (!items.length) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: items.map(([label, isSelected]) => {
      const itemLabel = isSelected ? (0, _i18n.sprintf)(
      // translators: %s: The name of the control being hidden and reset e.g. "Padding".
      (0, _i18n.__)('Hide and reset %s'), label) : (0, _i18n.sprintf)(
      // translators: %s: The name of the control to display e.g. "Padding".
      (0, _i18n._x)('Show %s', 'input control'), label);
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuItem.default, {
        icon: isSelected ? _icons.check : null,
        isSelected: isSelected,
        label: itemLabel,
        onClick: () => {
          if (isSelected) {
            (0, _a11y.speak)((0, _i18n.sprintf)(
            // translators: %s: The name of the control being reset e.g. "Padding".
            (0, _i18n.__)('%s hidden and reset to default'), label), 'assertive');
          } else {
            (0, _a11y.speak)((0, _i18n.sprintf)(
            // translators: %s: The name of the control being reset e.g. "Padding".
            (0, _i18n.__)('%s is now visible'), label), 'assertive');
          }
          toggleItem(label);
        },
        role: "menuitemcheckbox",
        children: label
      }, label);
    })
  });
};
const ToolsPanelHeader = (props, forwardedRef) => {
  const {
    areAllOptionalControlsHidden,
    defaultControlsItemClassName,
    dropdownMenuClassName,
    hasMenuItems,
    headingClassName,
    headingLevel = 2,
    label: labelText,
    menuItems,
    resetAll,
    toggleItem,
    dropdownMenuProps,
    ...headerProps
  } = (0, _hook.useToolsPanelHeader)(props);
  if (!labelText) {
    return null;
  }
  const defaultItems = Object.entries(menuItems?.default || {});
  const optionalItems = Object.entries(menuItems?.optional || {});
  const dropDownMenuIcon = areAllOptionalControlsHidden ? _icons.plus : _icons.moreVertical;
  const dropDownMenuLabelText = (0, _i18n.sprintf)(
  // translators: %s: The name of the tool e.g. "Color" or "Typography".
  (0, _i18n._x)('%s options', 'Button label to reveal tool panel options'), labelText);
  const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? (0, _i18n.__)('All options are currently hidden') : undefined;
  const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
    ...headerProps,
    ref: forwardedRef,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_heading.Heading, {
      level: headingLevel,
      className: headingClassName,
      children: labelText
    }), hasMenuItems && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.default, {
      ...dropdownMenuProps,
      icon: dropDownMenuIcon,
      label: dropDownMenuLabelText,
      menuProps: {
        className: dropdownMenuClassName
      },
      toggleProps: {
        size: 'small',
        description: dropdownMenuDescriptionText
      },
      children: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_menuGroup.default, {
          label: labelText,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultControlsGroup, {
            items: defaultItems,
            toggleItem: toggleItem,
            itemClassName: defaultControlsItemClassName
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionalControlsGroup, {
            items: optionalItems,
            toggleItem: toggleItem
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuGroup.default, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuItem.default, {
            "aria-disabled": !canResetAll
            // @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
            // we should rename it and explicitly allow it as an official API. All the other Button variants
            // don't make sense in a MenuItem context, and should be disallowed.
            ,
            variant: "tertiary",
            onClick: () => {
              if (canResetAll) {
                resetAll();
                (0, _a11y.speak)((0, _i18n.__)('All options reset'), 'assertive');
              }
            },
            children: (0, _i18n.__)('Reset all')
          })
        })]
      })
    })]
  });
};
const ConnectedToolsPanelHeader = (0, _context.contextConnect)(ToolsPanelHeader, 'ToolsPanelHeader');
var _default = exports.default = ConnectedToolsPanelHeader;
//# sourceMappingURL=component.js.map