"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SidesDropdown;
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const checkIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
  icon: _icons.check,
  size: 24
});
function SidesDropdown({
  label: labelProp,
  onChange,
  sides,
  value
}) {
  if (!sides || !sides.length) {
    return;
  }
  const supportedItems = (0, _utils.getSupportedMenuItems)(sides);
  const sideIcon = supportedItems[value].icon;
  const {
    custom: customItem,
    ...menuItems
  } = supportedItems;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
    icon: sideIcon,
    label: labelProp,
    className: "spacing-sizes-control__dropdown",
    toggleProps: {
      size: 'small'
    },
    children: ({
      onClose
    }) => {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
          children: Object.entries(menuItems).map(([slug, {
            label,
            icon
          }]) => {
            const isSelected = value === slug;
            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
              icon: icon,
              iconPosition: "left",
              isSelected: isSelected,
              role: "menuitemradio",
              onClick: () => {
                onChange(slug);
                onClose();
              },
              suffix: isSelected ? checkIcon : undefined,
              children: label
            }, slug);
          })
        }), !!customItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
            icon: customItem.icon,
            iconPosition: "left",
            isSelected: value === _utils.VIEWS.custom,
            role: "menuitemradio",
            onClick: () => {
              onChange(_utils.VIEWS.custom);
              onClose();
            },
            suffix: value === _utils.VIEWS.custom ? checkIcon : undefined,
            children: customItem.label
          })
        })]
      });
    }
  });
}
//# sourceMappingURL=index.js.map