"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ImageSizeControl;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _useDimensionHandler = _interopRequireDefault(require("./use-dimension-handler"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const IMAGE_SIZE_PRESETS = [25, 50, 75, 100];
const noop = () => {};
function ImageSizeControl({
  imageSizeHelp,
  imageWidth,
  imageHeight,
  imageSizeOptions = [],
  isResizable = true,
  slug,
  width,
  height,
  onChange,
  onChangeImage = noop
}) {
  const {
    currentHeight,
    currentWidth,
    updateDimension,
    updateDimensions
  } = (0, _useDimensionHandler.default)(height, width, imageHeight, imageWidth, onChange);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [imageSizeOptions && imageSizeOptions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
      __nextHasNoMarginBottom: true,
      label: (0, _i18n.__)('Resolution'),
      value: slug,
      options: imageSizeOptions,
      onChange: onChangeImage,
      help: imageSizeHelp,
      size: "__unstable-large"
    }), isResizable && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "block-editor-image-size-control",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
        align: "baseline",
        spacing: "3",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
          className: "block-editor-image-size-control__width",
          label: (0, _i18n.__)('Width'),
          value: currentWidth,
          min: 1,
          onChange: value => updateDimension('width', value),
          size: "__unstable-large"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
          className: "block-editor-image-size-control__height",
          label: (0, _i18n.__)('Height'),
          value: currentHeight,
          min: 1,
          onChange: value => updateDimension('height', value),
          size: "__unstable-large"
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ButtonGroup, {
          "aria-label": (0, _i18n.__)('Image size presets'),
          children: IMAGE_SIZE_PRESETS.map(scale => {
            const scaledWidth = Math.round(imageWidth * (scale / 100));
            const scaledHeight = Math.round(imageHeight * (scale / 100));
            const isCurrent = currentWidth === scaledWidth && currentHeight === scaledHeight;
            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
              size: "small",
              variant: isCurrent ? 'primary' : undefined,
              isPressed: isCurrent,
              onClick: () => updateDimensions(scaledHeight, scaledWidth),
              children: [scale, "%"]
            }, scale);
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          size: "small",
          onClick: () => updateDimensions(),
          children: (0, _i18n.__)('Reset')
        })]
      })]
    })]
  });
}
//# sourceMappingURL=index.js.map