"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const selectIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SVG, {
  xmlns: "http://www.w3.org/2000/svg",
  width: "24",
  height: "24",
  viewBox: "0 0 24 24",
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Path, {
    d: "M9.4 20.5L5.2 3.8l14.6 9-2 .3c-.2 0-.4.1-.7.1-.9.2-1.6.3-2.2.5-.8.3-1.4.5-1.8.8-.4.3-.8.8-1.3 1.5-.4.5-.8 1.2-1.2 2l-.3.6-.9 1.9zM7.6 7.1l2.4 9.3c.2-.4.5-.8.7-1.1.6-.8 1.1-1.4 1.6-1.8.5-.4 1.3-.8 2.2-1.1l1.2-.3-8.1-5z"
  })
});
function ToolSelector(props, ref) {
  const mode = (0, _data.useSelect)(select => select(_store.store).__unstableGetEditorMode(), []);
  const {
    __unstableSetEditorMode
  } = (0, _data.useDispatch)(_store.store);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
    renderToggle: ({
      isOpen,
      onToggle
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
      ...props,
      ref: ref,
      icon: mode === 'navigation' ? selectIcon : _icons.edit,
      "aria-expanded": isOpen,
      "aria-haspopup": "true",
      onClick: onToggle
      /* translators: button label text should, if possible, be under 16 characters. */,
      label: (0, _i18n.__)('Tools')
    }),
    popoverProps: {
      placement: 'bottom-start'
    },
    renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.NavigableMenu, {
        role: "menu",
        "aria-label": (0, _i18n.__)('Tools'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItemsChoice, {
          value: mode === 'navigation' ? 'navigation' : 'edit',
          onSelect: __unstableSetEditorMode,
          choices: [{
            value: 'edit',
            label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
                icon: _icons.edit
              }), (0, _i18n.__)('Edit')]
            })
          }, {
            value: 'navigation',
            label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
              children: [selectIcon, (0, _i18n.__)('Select')]
            })
          }]
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "block-editor-tool-selector__help",
        children: (0, _i18n.__)('Tools provide different interactions for selecting, navigating, and editing blocks. Toggle between select and edit by pressing Escape and Enter.')
      })]
    })
  });
}
var _default = exports.default = (0, _element.forwardRef)(ToolSelector);
//# sourceMappingURL=index.js.map