import './NotificationsPortal_drdpzd.css';
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useMemo } from 'react';
import { useStoreon } from 'storeon/react';
import { styled } from '@linaria/react';
import { cx } from '../../utils/index.js';
import { closeNotification } from './NotificationsStore.js';
import { StyledRoot, StyledItemWrapper } from './Notification.styles.js';
import { classes } from './Notification.tokens.js';
import { component } from '../../engines/common.js';
import { PopupProvider } from '../Popup/PopupContext.js';
import { popupConfig } from '../Popup/Popup.js';

var _excluded = ["id", "isHidden"];

// issue #823
var Popup = /*#__PURE__*/component(popupConfig);
var _exp = function _exp() {
  return Popup;
};
var StyledPopup = /*#__PURE__*/styled(_exp())({
  name: "StyledPopup",
  "class": "sms2tnz",
  propsAsIs: true
});

/**
 * Обертка для визуального представления уведомлений.
 */
var NotificationsPortal = function NotificationsPortal(_ref) {
  var config = _ref.config,
    frame = _ref.frame,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'bottom-right' : _ref$placement,
    UNSAFE_SSR_ENABLED = _ref.UNSAFE_SSR_ENABLED,
    className = _ref.className;
  var _useStoreon = useStoreon('notifications'),
    notifications = _useStoreon.notifications;
  var Notification = useMemo(function () {
    return component(config);
  }, []);
  var hasLeftAnimationClass = ['left', 'bottom-left', 'top-left'].includes(placement);
  return /*#__PURE__*/React__default.createElement(PopupProvider, {
    UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED
  }, notifications.length > 0 && /*#__PURE__*/React__default.createElement(StyledPopup, {
    opened: true,
    frame: frame,
    placement: placement,
    zIndex: "9100"
  }, /*#__PURE__*/React__default.createElement(StyledRoot, {
    placement: placement,
    className: className
  }, notifications.map(function (_ref2) {
    var id = _ref2.id,
      isHidden = _ref2.isHidden,
      rest = _objectWithoutProperties(_ref2, _excluded);
    return /*#__PURE__*/React__default.createElement(StyledItemWrapper, {
      key: id,
      className: cx(isHidden ? classes.notificationItemHidden : classes.notificationItemOpened, hasLeftAnimationClass && classes.notificationLeftToRightAnimation, placement === 'top' && classes.notificationTopToCenterAnimation, placement === 'bottom' && classes.notificationBottomToCenterAnimation),
      isHidden: isHidden || false
    }, /*#__PURE__*/React__default.createElement(Notification, _extends({
      key: id,
      id: id,
      onCloseButtonClick: function onCloseButtonClick() {
        return closeNotification(id);
      }
    }, rest)));
  }))));
};

export { NotificationsPortal };
