'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../utils/index.js');
var PopupRoot = require('./PopupRoot.js');
var Popup_tokens = require('./Popup.tokens.js');
var Popup_styles = require('./Popup.styles.js');
var react = require('../../utils/react.js');
var usePopup = require('./hooks/usePopup.js');
var useForkRef = require('../../hooks/useForkRef.js');
var Resizable = require('./ui/Resizable/Resizable.js');
var canUseDOM = require('../../utils/canUseDOM.js');
var Portal = require('../Portal/Portal.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["id", "isOpen", "opened", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "withAnimation", "className", "draggable", "resizable"];
var handlePosition = function handlePosition(placement, offset) {
  var x = '0rem';
  var y = '0rem';
  if (offset) {
    var _offset = _rollupPluginBabelHelpers.slicedToArray(offset, 2),
      _x = _offset[0],
      _y = _offset[1];
    x = typeof _x === 'number' ? "".concat(_x, "rem") : _x;
    y = typeof _y === 'number' ? "".concat(_y, "rem") : _y;
  }
  if (!placement || placement === 'center') {
    return {
      left: "calc(50% + ".concat(x, ")"),
      top: "calc(50% - ".concat(y, ")"),
      transform: 'translate(-50%, -50%)'
    };
  }
  var left;
  var right;
  var top;
  var bottom;
  var transform;
  var placements = placement.split('-');
  placements.forEach(function (placementValue) {
    switch (placementValue) {
      case 'left':
        left = x;
        break;
      case 'right':
        right = x;
        break;
      case 'top':
        top = y;
        break;
      case 'bottom':
        bottom = y;
        break;
    }
  });
  var isCenteredX = left === undefined && right === undefined;
  var isCenteredY = top === undefined && bottom === undefined;
  if (isCenteredX) {
    transform = 'translateX(-50%)';
  }
  if (isCenteredY) {
    transform = 'translateY(-50%)';
  }
  return {
    left: isCenteredX ? "calc(50% + ".concat(x, ")") : left,
    right: right,
    top: isCenteredY ? "calc(50% - ".concat(y, ")") : top,
    bottom: bottom,
    transform: transform
  };
};

/**
 * Базовый компонент Popup.
 */
var popupRoot = function popupRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, outerRootRef) {
    var id = _ref.id,
      _ref$isOpen = _ref.isOpen,
      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
      _ref$opened = _ref.opened,
      opened = _ref$opened === void 0 ? false : _ref$opened,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'center' : _ref$placement,
      _ref$offset = _ref.offset,
      offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
      _ref$frame = _ref.frame,
      frame = _ref$frame === void 0 ? 'document' : _ref$frame,
      children = _ref.children,
      overlay = _ref.overlay,
      zIndex = _ref.zIndex,
      popupInfo = _ref.popupInfo,
      _ref$withAnimation = _ref.withAnimation,
      withAnimation = _ref$withAnimation === void 0 ? false : _ref$withAnimation,
      className = _ref.className,
      draggable = _ref.draggable,
      outerResizable = _ref.resizable,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var innerIsOpen = isOpen || opened;
    var uniqId = react.safeUseId();
    var innerId = id || uniqId;
    var _usePopup = usePopup.usePopup({
        isOpen: innerIsOpen,
        id: innerId,
        popupInfo: popupInfo,
        withAnimation: withAnimation
      }),
      isVisible = _usePopup.isVisible,
      animationInfo = _usePopup.animationInfo,
      setVisible = _usePopup.setVisible,
      rootId = _usePopup.rootId;
    var portalRef = React.useRef(null);
    var contentRef = React.useRef(null);
    var innerRef = useForkRef.useForkRef(contentRef, outerRootRef);
    if (!isVisible && !innerIsOpen) {
      return null;
    }
    var cls = index.cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? Popup_tokens.classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? Popup_tokens.classes.endTransition : '');
    var rootNode = /*#__PURE__*/React__default.default.createElement(Root, {
      className: cls
    }, overlay, /*#__PURE__*/React__default.default.createElement(PopupRoot.PopupRoot, _rollupPluginBabelHelpers.extends({
      id: innerId,
      ref: innerRef,
      draggable: draggable,
      position: handlePosition(placement, offset),
      zIndex: zIndex,
      frame: frame,
      animationInfo: animationInfo,
      setVisible: setVisible
    }, rest), /*#__PURE__*/React__default.default.createElement(Resizable.Resizable, {
      resizable: outerResizable,
      placement: placement
    }, children)));
    if (typeof frame !== 'string' && frame && frame.current && canUseDOM.canUseDOM) {
      return /*#__PURE__*/React__default.default.createElement(Portal.Portal, {
        container: frame.current
      }, rootNode);
    }
    var withFrameId = typeof frame === 'string' && frame !== 'document';
    var containerElement = withFrameId && canUseDOM.canUseDOM && document.getElementById(frame);
    if (containerElement) {
      return /*#__PURE__*/React__default.default.createElement(Portal.Portal, {
        container: containerElement
      }, /*#__PURE__*/React__default.default.createElement(Popup_styles.StyledPortalContainer, {
        ref: portalRef
      }, portalRef.current && /*#__PURE__*/React__default.default.createElement(Portal.Portal, {
        container: portalRef.current
      }, rootNode)), ' ');
    }
    var globalPortal = canUseDOM.canUseDOM && document.getElementById(rootId);
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, globalPortal && /*#__PURE__*/React__default.default.createElement(Portal.Portal, {
      container: globalPortal
    }, rootNode));
  });
};
var popupConfig = {
  name: 'Popup',
  tag: 'div',
  layout: popupRoot,
  base: Popup_styles.base,
  variations: {},
  defaults: {}
};

exports.handlePosition = handlePosition;
exports.popupConfig = popupConfig;
exports.popupRoot = popupRoot;
