import React, { useMemo } from "react";
import { useStoreon } from "storeon/react";
import styled from "styled-components";
import { component } from "../../engines";
import { cx } from "../../utils";
import { PopupProvider, popupConfig, popupClasses } from "../Popup";
import { closeNotification } from "./NotificationsStore";
import { StyledItemWrapper, StyledRoot } from "./Notification.styles";
import { classes } from "./Notification.tokens";
// issue #823
const Popup = component(popupConfig);
const StyledPopup = styled(Popup).withConfig({
    displayName: "NotificationsPortal__StyledPopup",
    componentId: "sc-e2f738ff-0"
})([
    `& > .`,
    `{overflow:hidden;}`
], popupClasses.root);
/**
 * Обертка для визуального представления уведомлений.
 */ export const NotificationsPortal = ({ config, frame, placement = 'bottom-right', UNSAFE_SSR_ENABLED, className })=>{
    const { notifications } = useStoreon('notifications');
    const Notification = useMemo(()=>component(config), []);
    const hasLeftAnimationClass = [
        'left',
        'bottom-left',
        'top-left'
    ].includes(placement);
    return /*#__PURE__*/ React.createElement(PopupProvider, {
        UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED
    }, notifications.length > 0 && /*#__PURE__*/ React.createElement(StyledPopup, {
        opened: true,
        frame: frame,
        placement: placement,
        zIndex: "9100"
    }, /*#__PURE__*/ React.createElement(StyledRoot, {
        placement: placement,
        className: className
    }, notifications.map(({ id, isHidden, ...rest })=>/*#__PURE__*/ React.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.createElement(Notification, {
            key: id,
            id: id,
            onCloseButtonClick: ()=>closeNotification(id),
            ...rest
        }))))));
};
