import React__default, { useRef } from 'react';
import { Resizable as Resizable$1 } from 're-resizable';
import { classes } from '../../Popup.tokens.js';
import { IconResizeDiagonalStyled } from '../../Popup.styles.js';
import { getResizeDirections } from '../../utils/getResizeDirections.js';
import { getRatioBasedOnPlacement } from '../../utils/getRatioBasedOnPlacement.js';
import { getHandleStyles } from '../../utils/getHandleStyles.js';

var Resizable = function Resizable(_ref) {
  var _resizable$hiddenIcon, _resizable$icons, _resizable$hiddenIcon2, _resizable$icons2, _resizable$hiddenIcon3, _resizable$icons3, _resizable$hiddenIcon4, _resizable$icons4;
  var children = _ref.children,
    outerResizable = _ref.resizable,
    placement = _ref.placement;
  var resizableContainer = useRef(null);
  var resizable = typeof outerResizable === 'boolean' ? {
    disabled: !outerResizable
  } : outerResizable;
  var handleResizeStart = function handleResizeStart() {
    if (resizableContainer !== null && resizableContainer !== void 0 && resizableContainer.current && resizableContainer.current.resizable) {
      resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
    }
    if (resizable !== null && resizable !== void 0 && resizable.onResizeStart) {
      resizable.onResizeStart(resizableContainer);
    }
  };
  var handleResizeStop = function handleResizeStop() {
    if (resizableContainer !== null && resizableContainer !== void 0 && resizableContainer.current && resizableContainer.current.resizable) {
      resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
    }
    if (resizable !== null && resizable !== void 0 && resizable.onResizeEnd) {
      resizable.onResizeEnd(resizableContainer);
    }
  };
  if (!resizable || resizable.disabled) {
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
  }
  return /*#__PURE__*/React__default.createElement(Resizable$1, {
    ref: resizableContainer,
    enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
    resizeRatio: getRatioBasedOnPlacement(placement),
    defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
    minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
    minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
    maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
    maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
    onResizeStart: handleResizeStart,
    onResizeStop: handleResizeStop,
    handleComponent: {
      topRight: resizable !== null && resizable !== void 0 && (_resizable$hiddenIcon = resizable.hiddenIcons) !== null && _resizable$hiddenIcon !== void 0 && _resizable$hiddenIcon.includes('top-right') ? undefined : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (resizable === null || resizable === void 0 || (_resizable$icons = resizable.icons) === null || _resizable$icons === void 0 ? void 0 : _resizable$icons.topRight) || /*#__PURE__*/React__default.createElement(IconResizeDiagonalStyled, {
        className: classes.resizableTopRightIcon,
        color: "inherit",
        size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
      })),
      bottomRight: resizable !== null && resizable !== void 0 && (_resizable$hiddenIcon2 = resizable.hiddenIcons) !== null && _resizable$hiddenIcon2 !== void 0 && _resizable$hiddenIcon2.includes('bottom-right') ? undefined : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (resizable === null || resizable === void 0 || (_resizable$icons2 = resizable.icons) === null || _resizable$icons2 === void 0 ? void 0 : _resizable$icons2.bottomRight) || /*#__PURE__*/React__default.createElement(IconResizeDiagonalStyled, {
        className: classes.resizableBottomRightIcon,
        color: "inherit",
        size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
      })),
      bottomLeft: resizable !== null && resizable !== void 0 && (_resizable$hiddenIcon3 = resizable.hiddenIcons) !== null && _resizable$hiddenIcon3 !== void 0 && _resizable$hiddenIcon3.includes('bottom-left') ? undefined : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (resizable === null || resizable === void 0 || (_resizable$icons3 = resizable.icons) === null || _resizable$icons3 === void 0 ? void 0 : _resizable$icons3.bottomLeft) || /*#__PURE__*/React__default.createElement(IconResizeDiagonalStyled, {
        className: classes.resizableBottomLeftIcon,
        color: "inherit",
        size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
      })),
      topLeft: resizable !== null && resizable !== void 0 && (_resizable$hiddenIcon4 = resizable.hiddenIcons) !== null && _resizable$hiddenIcon4 !== void 0 && _resizable$hiddenIcon4.includes('top-left') ? undefined : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (resizable === null || resizable === void 0 || (_resizable$icons4 = resizable.icons) === null || _resizable$icons4 === void 0 ? void 0 : _resizable$icons4.topLeft) || /*#__PURE__*/React__default.createElement(IconResizeDiagonalStyled, {
        className: classes.resizableTopLeftIcon,
        color: "inherit",
        size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
      }))
    },
    className: classes.resizableContainer,
    handleStyles: getHandleStyles(),
    handleWrapperClass: classes.resizableHandleWrapper
  }, children);
};

export { Resizable };
