'use strict';

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

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var cls = require('classnames');
var index = require('../Popup/utils/index.js');
var Drawer_tokens = require('./Drawer.tokens.js');
var base = require('./variations/_view/base.js');
var base$1 = require('./variations/_size/base.js');
var base$2 = require('./variations/_borderRadius/base.js');
var Drawer_styles = require('./Drawer.styles.js');
var DrawerContext = require('./DrawerContext.js');
var useFocusTrap = require('../../hooks/useFocusTrap.js');
var PopupContext = require('../Popup/PopupContext.js');
var useForkRef = require('../../hooks/useForkRef.js');
var react = require('../../utils/react.js');
var useDrawer = require('./hooks/useDrawer.js');
var Overlay = require('../Overlay/Overlay.js');
var getSizeValueFromProp = require('../../utils/getSizeValueFromProp.js');

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

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

var _excluded = ["id", "zIndex", "popupInfo", "withBlur", "children", "view", "size", "width", "height", "isOpen", "opened", "initialFocusRef", "focusAfterRef", "animationInfo", "className", "customBackgroundColor", "customContentBackgroundColor", "onClose", "onOverlayClick", "onEscKeyDown", "offset", "frame", "positionFixed", "borderRadius", "placement", "closeOnEsc", "closeOnOverlayClick", "asModal", "draggable"];

// issue #823

var drawerRoot = function drawerRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
    var id = _ref.id,
      zIndex = _ref.zIndex,
      popupInfo = _ref.popupInfo,
      withBlur = _ref.withBlur,
      children = _ref.children,
      view = _ref.view,
      size = _ref.size,
      width = _ref.width,
      height = _ref.height,
      isOpen = _ref.isOpen,
      opened = _ref.opened,
      initialFocusRef = _ref.initialFocusRef,
      focusAfterRef = _ref.focusAfterRef,
      animationInfo = _ref.animationInfo,
      className = _ref.className,
      customBackgroundColor = _ref.customBackgroundColor,
      customContentBackgroundColor = _ref.customContentBackgroundColor,
      onClose = _ref.onClose,
      onOverlayClick = _ref.onOverlayClick,
      onEscKeyDown = _ref.onEscKeyDown,
      offset = _ref.offset,
      frame = _ref.frame,
      _ref$positionFixed = _ref.positionFixed,
      positionFixed = _ref$positionFixed === void 0 ? false : _ref$positionFixed,
      _ref$borderRadius = _ref.borderRadius,
      borderRadius = _ref$borderRadius === void 0 ? 'none' : _ref$borderRadius,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'right' : _ref$placement,
      _ref$closeOnEsc = _ref.closeOnEsc,
      closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
      _ref$asModal = _ref.asModal,
      asModal = _ref$asModal === void 0 ? true : _ref$asModal,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var innerIsOpen = Boolean(isOpen || opened);
    var trapRef = useFocusTrap.useFocusTrap(true, initialFocusRef, focusAfterRef);
    var popupController = PopupContext.usePopupContext();
    var innerRef = useForkRef.useForkRef(trapRef, outerRef);
    var uniqId = react.safeUseId();
    var innerId = id || uniqId;
    var overlayBackgroundToken = withBlur ? "var(".concat(Drawer_tokens.tokens.drawerOverlayWithBlurColor, ")") : "var(".concat(Drawer_tokens.tokens.drawerOverlayColor, ")");
    var innerWidth = width ? getSizeValueFromProp.getSizeValueFromProp(width) : '100%';
    var innerHeight = height ? getSizeValueFromProp.getSizeValueFromProp(height) : '100%';
    var placementClass = placement ? Drawer_tokens.classes["".concat(placement, "Placement")] : undefined;
    var _useDrawer = useDrawer.useDrawer({
        id: innerId,
        isOpen: innerIsOpen,
        closeOnEsc: closeOnEsc,
        onEscKeyDown: onEscKeyDown,
        onClose: onClose,
        popupInfo: popupInfo,
        disableScroll: asModal
      }),
      drawerInfo = _useDrawer.drawerInfo;
    var transparent = React.useMemo(function () {
      return DrawerContext.getIdLastDrawer(Array.from(popupController.items.values())) !== innerId;
    }, [innerId, popupController.items]);
    var onDrawerOverlayKeyDown = function onDrawerOverlayKeyDown(event) {
      if (onOverlayClick) {
        onOverlayClick(event);
        return;
      }
      if (onClose) {
        onClose();
      }
    };
    return /*#__PURE__*/React__default.default.createElement(Drawer_styles.StyledPopup, _rollupPluginBabelHelpers.extends({
      id: innerId,
      ref: asModal ? innerRef : outerRef,
      className: cls__default.default(placementClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Drawer_tokens.classes.enterCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.enter), Drawer_tokens.classes.exitCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.exit)),
      opened: innerIsOpen,
      zIndex: zIndex,
      placement: placement,
      popupInfo: drawerInfo,
      frame: frame,
      positionFixed: positionFixed,
      width: innerWidth,
      height: innerHeight,
      offset: offset,
      withAnimation: true,
      drawerAnimationInfo: animationInfo,
      overlay: asModal && /*#__PURE__*/React__default.default.createElement(Root, {
        view: view
      }, /*#__PURE__*/React__default.default.createElement(Overlay.Overlay, {
        className: Drawer_tokens.classes.overlay,
        zIndex: zIndex || index.DEFAULT_Z_INDEX,
        backgroundColorProperty: overlayBackgroundToken,
        withBlur: withBlur,
        transparent: transparent,
        isClickable: closeOnOverlayClick,
        onOverlayClick: onDrawerOverlayKeyDown
      }))
    }, rest), /*#__PURE__*/React__default.default.createElement(Root, {
      className: Drawer_tokens.classes.panel,
      view: view,
      size: size,
      style: {
        width: innerWidth,
        height: innerHeight
      },
      borderRadius: borderRadius
    }, /*#__PURE__*/React__default.default.createElement(Drawer_styles.StyledPanel, {
      width: innerWidth,
      height: innerHeight,
      customBackgroundColor: customBackgroundColor,
      customContentBackgroundColor: customContentBackgroundColor
    }, children)));
  });
};
var drawerConfig = {
  name: 'Drawer',
  tag: 'div',
  layout: drawerRoot,
  base: '',
  variations: {
    view: {
      css: base.base
    },
    size: {
      css: base$1.base
    },
    borderRadius: {
      css: base$2.base
    }
  },
  defaults: {
    view: 'default',
    size: 'm',
    borderRadius: 'none'
  }
};

exports.drawerConfig = drawerConfig;
exports.drawerRoot = drawerRoot;
