import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { useState } from 'react';
import cx from 'classnames';
import CSSMotion from '../components/rc-motion';
import { Icons } from '../components';
import { getCurIcon } from '../utils/getTypedIcon';
import { ConfigContext } from '../config-provider/context';
var CloseLine = Icons.CloseLine;

var Alert = function Alert(props) {
  var type = props.type,
      message = props.message,
      description = props.description,
      closable = props.closable,
      closeText = props.closeText,
      showIcon = props.showIcon,
      icon = props.icon,
      action = props.action,
      _props$className = props.className,
      className = _props$className === void 0 ? '' : _props$className,
      style = props.style,
      onClose = props.onClose,
      resetProps = _objectWithoutProperties(props, ["type", "message", "description", "closable", "closeText", "showIcon", "icon", "action", "className", "style", "onClose"]); // state


  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isClosed = _useState2[0],
      setIsClosed = _useState2[1];

  var ref = React.useRef();

  var _React$useContext = React.useContext(ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName;

  var alertCls = getPrefixClassName('alert'); // method

  var handleClose = function handleClose(evt) {
    setIsClosed(true);
    onClose === null || onClose === void 0 ? void 0 : onClose(evt);
  }; // render


  var renderIconNode = function renderIconNode(iconType) {
    var curIcon = getCurIcon(Icons, iconType, true);
    return /*#__PURE__*/React.createElement("span", {
      className: "".concat(alertCls, "-icon")
    }, icon || /*#__PURE__*/React.createElement("span", {
      className: "".concat(alertCls, "-icon-").concat(description ? 'desc-svg' : 'msg-svg')
    }, curIcon));
  };

  var renderActionNode = function renderActionNode() {
    return /*#__PURE__*/React.createElement("span", {
      className: "".concat(alertCls, "-action")
    }, action);
  };

  var renderCloseNode = function renderCloseNode() {
    return /*#__PURE__*/React.createElement("span", {
      onClick: handleClose,
      className: "".concat(alertCls, "-close")
    }, closeText ? /*#__PURE__*/React.createElement("span", {
      className: "".concat(alertCls, "-close-text")
    }, closeText) :
    /*#__PURE__*/
    // '关闭'
    React.createElement(CloseLine, null));
  };

  return /*#__PURE__*/React.createElement(CSSMotion, {
    visible: !isClosed,
    motionName: "".concat(alertCls, "-motion"),
    motionAppear: false,
    motionEnter: false,
    onLeaveStart: function onLeaveStart(_ref) {
      var offsetHeight = _ref.offsetHeight;
      return {
        maxHeight: offsetHeight
      };
    }
  }, function (motion) {
    return /*#__PURE__*/React.createElement("div", Object.assign({}, resetProps, {
      ref: ref,
      className: cx(alertCls, "".concat(alertCls, "-").concat(type), !!description && "".concat(alertCls, "-with-description"), className, motion.className),
      style: _objectSpread(_objectSpread({}, style), motion.style),
      role: "alert"
    }), /*#__PURE__*/React.createElement("div", {
      className: "".concat(alertCls, "-content")
    }, showIcon ? renderIconNode(type) : null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(alertCls, "-message")
    }, message, description && /*#__PURE__*/React.createElement("div", {
      className: "".concat(alertCls, "-description")
    }, description))), action ? renderActionNode() : null, closable ? renderCloseNode() : null);
  });
};

Alert.displayName = 'Alert';
Alert.defaultProps = {
  type: 'info',
  showIcon: false,
  closable: false
};
export default Alert;