import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useMemo } from 'react';
import { cx } from '../../utils/index.js';
import { IconCross } from '../_Icon/Icons/IconCross.js';
import { IconCrossThin } from '../_Icon/Icons/IconCrossThin.js';
import { classes, tokens } from './Notification.tokens.js';
import { base as base$1 } from './variations/_view/base.js';
import { base } from './variations/_layout/base.js';
import { base as base$2 } from './variations/_size/base.js';
import { base as base$3 } from './variations/_closeIconType/base.js';
import { layouts } from './Notification.types.js';
import { Wrapper, ContentBox, IconWrapper, TextBox, StyledTitle, StyledContent, ButtonsWrapper, CloseIconWrapper, StyledNotification } from './Notification.styles.js';
import { getLayoutClass } from './utils/index.js';

var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "layout", "icon", "showCloseIcon", "closeIconType", "customCloseIcon", "textColor", "titleColor", "backgroundColor", "width", "maxWidth", "onCloseButtonClick"];

/**
 * Компонент для небольших уведомлений пользователя
 */
var notificationRoot = function notificationRoot(Root) {
  return /*#__PURE__*/forwardRef(function (props, ref) {
    var _props$role = props.role,
      role = _props$role === void 0 ? 'status' : _props$role,
      title = props.title,
      content = props.children,
      actions = props.actions,
      view = props.view,
      size = props.size,
      iconPlacement = props.iconPlacement,
      _props$layout = props.layout,
      layout = _props$layout === void 0 ? layouts.vertical : _props$layout,
      icon = props.icon,
      _props$showCloseIcon = props.showCloseIcon,
      showCloseIcon = _props$showCloseIcon === void 0 ? true : _props$showCloseIcon,
      closeIconType = props.closeIconType,
      customCloseIcon = props.customCloseIcon,
      textColor = props.textColor,
      titleColor = props.titleColor,
      backgroundColor = props.backgroundColor,
      width = props.width,
      maxWidth = props.maxWidth,
      onCloseButtonClick = props.onCloseButtonClick,
      rest = _objectWithoutProperties(props, _excluded);
    var ariaLive = 'polite';
    var ariaAtomic = false;
    if (role === 'alert') {
      ariaLive = 'assertive';
    } else if (role === 'status') {
      ariaAtomic = true;
    }
    var isOneLine = !content || !title;
    var oneLineClass = isOneLine ? classes.oneLine : undefined;
    var withoutIconClass = icon ? undefined : classes.withoutIcon;
    var withoutCloseIconClass = showCloseIcon ? undefined : classes.withoutCloseIcon;
    var IconPlacementInternal = useMemo(function () {
      return icon ? iconPlacement : undefined;
    }, [icon, iconPlacement]);
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      view: view,
      size: size,
      layout: layout,
      closeIconType: closeIconType,
      ref: ref,
      role: role,
      "aria-live": ariaLive,
      "aria-atomic": ariaAtomic
    }, rest), /*#__PURE__*/React__default.createElement(Wrapper, {
      backgroundColor: backgroundColor,
      width: width,
      maxWidth: maxWidth,
      className: cx(classes.wrapper, getLayoutClass(layout), oneLineClass, withoutCloseIconClass)
    }, /*#__PURE__*/React__default.createElement(ContentBox, {
      iconPlacement: IconPlacementInternal,
      className: cx(classes.contentBox, getLayoutClass(layout), withoutIconClass)
    }, icon && /*#__PURE__*/React__default.createElement(IconWrapper, {
      iconPlacement: IconPlacementInternal,
      className: cx(classes.icon, getLayoutClass(layout))
    }, icon), /*#__PURE__*/React__default.createElement(TextBox, {
      iconPlacement: IconPlacementInternal,
      showCloseIcon: showCloseIcon,
      className: cx(classes.textbox, getLayoutClass(layout))
    }, title && /*#__PURE__*/React__default.createElement(StyledTitle, {
      className: classes.title,
      textColor: titleColor
    }, title), content && /*#__PURE__*/React__default.createElement(StyledContent, {
      className: classes.text,
      textColor: textColor
    }, content))), actions && /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
      iconPlacement: IconPlacementInternal,
      className: cx(classes.buttonsWrapper, getLayoutClass(layout))
    }, actions), showCloseIcon && /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
      view: "clear",
      size: "s",
      onClick: onCloseButtonClick,
      className: cx(classes.closeIcon, getLayoutClass(layout))
    }, customCloseIcon || (closeIconType === 'default' ? /*#__PURE__*/React__default.createElement(IconCross, {
      size: "s",
      sizeCustomProperty: tokens.closeIconSize,
      color: "inherit"
    }) : /*#__PURE__*/React__default.createElement(IconCrossThin, {
      size: "s",
      sizeCustomProperty: tokens.closeIconSize,
      color: "inherit"
    })))));
  });
};
var notificationConfig = {
  name: 'Notification',
  tag: 'div',
  layout: notificationRoot,
  base: StyledNotification,
  variations: {
    layout: {
      css: base
    },
    view: {
      css: base$1
    },
    size: {
      css: base$2
    },
    closeIconType: {
      css: base$3
    }
  },
  defaults: {
    view: 'default',
    layout: layouts.vertical,
    size: 'xs',
    closeIconType: 'default'
  }
};

export { notificationConfig, notificationRoot };
