"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.STICKY_NOTIFICATION = exports.LOCAL_NOTIFICATION = exports.GLOBAL_NOTIFICATION = exports.DEFAULT_TIMEOUT = exports.DEFAULT_AUTO_HIDE_TIMEOUT = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _TextLabel = _interopRequireDefault(require("./components/TextLabel"));
var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
var _NotificationSt = require("./Notification.st.css.js");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Notification2 = require("./Notification.constants");
var _constants = require("../Transition/constants");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Notification/Notification.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var LOCAL_NOTIFICATION = exports.LOCAL_NOTIFICATION = 'local';
var GLOBAL_NOTIFICATION = exports.GLOBAL_NOTIFICATION = 'global';
var STICKY_NOTIFICATION = exports.STICKY_NOTIFICATION = 'sticky';
var DEFAULT_AUTO_HIDE_TIMEOUT = exports.DEFAULT_AUTO_HIDE_TIMEOUT = 6000;
var DEFAULT_TIMEOUT = exports.DEFAULT_TIMEOUT = DEFAULT_AUTO_HIDE_TIMEOUT;
var animationsTimeouts = {
  enter: 300,
  exit: 300
};
var skinIcon = {
  error: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlert, {
    className: _NotificationSt.classes.iconStyling,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 10
    }
  }),
  success: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusComplete, {
    className: _NotificationSt.classes.iconStyling,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 12
    }
  }),
  warning: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusWarning, {
    className: _NotificationSt.classes.iconStyling,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36,
      columnNumber: 12
    }
  })
};
function mapChildren(children) {
  var childrenArray = _react.Children.toArray(children);
  return childrenArray.reduce((childrenAsMap, child) => {
    if (! /*#__PURE__*/_react.default.isValidElement(child)) return childrenAsMap;
    var displayName = child.type.displayName;
    switch (displayName) {
      case 'Notification.TextLabel':
        childrenAsMap.label = child;
        break;
      case 'Notification.ActionButton':
        childrenAsMap.ctaButton = child;
        break;
      case 'Notification.CloseButton':
        childrenAsMap.closeButton = /*#__PURE__*/_react.default.cloneElement(child, {
          size: 'small'
        });
        break;
      default:
        break;
    }
    return childrenAsMap;
  }, {});
}
class Notification extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.closeTimeout = null;
    this.transitionTimeout = null;
    this.ref = /*#__PURE__*/_react.default.createRef();
    this.childRef = /*#__PURE__*/_react.default.createRef();
    this.state = {
      hideByCloseClick: false,
      hideByTimer: false,
      height: 0,
      showChildren: false
    };
    this._hideNotificationOnCloseClick = () => {
      this.setState({
        hideByCloseClick: true
      });
      setTimeout(() => this.props.onClose && this.props.onClose('hide-by-close-click'), animationsTimeouts.exit + 100);
    };
    this._hideNotificationOnTimeout = () => {
      this.setState({
        hideByTimer: true
      });
      setTimeout(() => this.props.onClose && this.props.onClose('hide-by-timer'), animationsTimeouts.exit + 100);
    };
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.show) {
      this._setChildrenVisibility(nextProps);
      this._bypassCloseFlags();
      this._clearCloseTimeout();
      this._startCloseTimer(nextProps);
    }
  }
  componentDidMount() {
    this._setChildrenVisibility(this.props);
    this._startCloseTimer(this.props);
  }
  componentWillUnmount() {
    this._clearCloseTimeout();
    this._clearTransitionTimeout();
  }
  componentDidUpdate(prevProps, prevState) {
    var {
      showChildren,
      height,
      hideByCloseClick,
      hideByTimer
    } = this.state;
    if (prevProps.show !== this.props.show || prevState.showChildren !== this.state.showChildren) {
      var show = this._shouldShowNotification(this.props.show);
      if (show) {
        if (showChildren && this.ref.current && height === 0) {
          this.setState({
            height: this._setHeightToChild(this.ref.current)
          });
        }
      } else {
        if (showChildren && height !== 0) {
          this.setState({
            height: 0
          });
        }
      }
    }
    if (prevState.hideByCloseClick !== hideByCloseClick || prevState.hideByTimer !== hideByTimer) {
      this._setChildrenVisibility(this.props);
    }
  }
  _setChildrenVisibility(_ref) {
    var {
      show
    } = _ref;
    this._clearTransitionTimeout();
    if (this._shouldShowNotification(show)) {
      this.setState({
        showChildren: true
      });
    } else {
      this.setState({
        height: 0
      });
      this.transitionTimeout = setTimeout(() => {
        this.setState({
          showChildren: false
        });
        this.transitionTimeout = null;
      }, _constants.timingMap['medium01']);
    }
  }
  _clearTransitionTimeout() {
    if (this.transitionTimeout) {
      clearTimeout(this.transitionTimeout);
      this.transitionTimeout = null;
    }
  }
  _startCloseTimer(_ref2) {
    var {
      autoHideTimeout
    } = _ref2;
    if (autoHideTimeout) {
      this.closeTimeout = setTimeout(() => this._hideNotificationOnTimeout(), autoHideTimeout || DEFAULT_AUTO_HIDE_TIMEOUT);
    }
  }
  _clearCloseTimeout() {
    if (this.closeTimeout) {
      clearTimeout(this.closeTimeout);
      this.closeTimeout = null;
    }
  }
  _bypassCloseFlags() {
    this.setState({
      hideByCloseClick: false,
      hideByTimer: false
    });
  }
  _shouldShowNotification(show) {
    return show && !this.state.hideByCloseClick && !this.state.hideByTimer;
  }
  _setHeightToChild(node) {
    var height = this.childRef && this.childRef.current ? this.childRef.current.offsetHeight : 0;
    if (node && node.firstChild) {
      node.firstChild.style.height = "".concat(height, "px");
    }
    return height;
  }
  _getChildren() {
    if (!this.state.showChildren) {
      return null;
    }
    var {
      theme,
      children
    } = this.props;
    var skin = this.props.skin || theme;
    var childrenComponents = mapChildren(children);
    var icon = skin ? skinIcon[skin] : undefined;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _NotificationSt.classes.wrapper,
      style: {
        overflow: 'hidden',
        transition: "height ".concat(_constants.timingMap['medium01'], "ms"),
        height: this.state.height
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 226,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _Notification2.dataHooks.notificationContent,
      className: _NotificationSt.classes.notification,
      role: "alert",
      "aria-labelledby": "notification-label",
      "aria-live": "polite",
      ref: this.childRef,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 234,
        columnNumber: 9
      }
    }, icon && /*#__PURE__*/_react.default.createElement("div", {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 242,
        columnNumber: 20
      }
    }, icon), /*#__PURE__*/_react.default.createElement("div", {
      className: _NotificationSt.classes.labelWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 244,
        columnNumber: 11
      }
    }, childrenComponents.label, childrenComponents.ctaButton), childrenComponents.closeButton && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _Notification2.dataHooks.notificationCloseButton,
      className: _NotificationSt.classes.closeButton,
      onClick: this._hideNotificationOnCloseClick,
      children: childrenComponents.closeButton,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 250,
        columnNumber: 13
      }
    })));
  }
  render() {
    var {
      dataHook,
      theme,
      type,
      zIndex
    } = this.props;
    var skin = this.props.skin || theme;
    if (theme) {
      (0, _deprecationLog.default)('<Notification/> - theme prop is deprecated and will be removed in next major version, please use skin instead');
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _NotificationSt.st)(_NotificationSt.classes.root, {
        skin,
        type
      }),
      style: {
        zIndex
      },
      "data-hook": dataHook,
      "data-skin": skin,
      "data-type": type,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 273,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _NotificationSt.classes.animator,
      style: {
        overflow: 'hidden',
        transition: "height ".concat(_constants.timingMap['medium01'], "ms"),
        height: this.state.height
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 280,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      ref: this.ref,
      className: _NotificationSt.classes.animatorContent,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 288,
        columnNumber: 11
      }
    }, this._getChildren())));
  }
}
Notification.displayName = 'Notification';
Notification.CloseButton = void 0;
Notification.TextLabel = void 0;
Notification.ActionButton = void 0;
Notification.defaultProps = {
  theme: 'standard',
  // TODO: add default value for skin once theme is removed
  type: GLOBAL_NOTIFICATION
};
var Close = props => /*#__PURE__*/_react.default.createElement(_CloseButton.default, (0, _extends2.default)({
  skin: "lightFilled"
}, props, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 298,
    columnNumber: 3
  }
}));
Close.displayName = 'Notification.CloseButton';
Notification.CloseButton = Close;
Notification.TextLabel = _TextLabel.default;
Notification.ActionButton = _ActionButton.default;
var _default = exports.default = Notification;
//# sourceMappingURL=Notification.js.map