"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireDefault(require("react"));

var _classnames2 = _interopRequireDefault(require("classnames"));

var _context = require("../config-provider/context");

var _omit = _interopRequireDefault(require("../components/rc-util/omit"));

var _components = require("../components");

// @ts-nocheck
var CloseLine = _components.Icons.CloseLine;
var INNER_COLORS = ['blue', 'green', 'orange', 'red', 'gray'];

var Tag = function Tag(props) {
  var _classnames;

  var customSize = props.size,
      closable = props.closable,
      closeIcon = props.closeIcon,
      color = props.color,
      onClose = props.onClose,
      style = props.style,
      className = props.className,
      children = props.children,
      iconNode = props.iconNode,
      _props$type = props.type,
      type = _props$type === void 0 ? 'line' : _props$type,
      disabled = props.disabled,
      width = props.width,
      maxWidth = props.maxWidth;

  var _React$useContext = _react.default.useContext(_context.ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName,
      size = _React$useContext.size;

  var tagPrefix = getPrefixClassName('tag');

  var _React$useState = _react.default.useState(true),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      iconVisible = _React$useState2[0],
      setIconVisible = _React$useState2[1];

  var endSize = customSize || size;
  var isInnerColor = INNER_COLORS.includes(color);

  _react.default.useEffect(function () {
    if ('visible' in props) {
      setIconVisible(props.visible);
    }
  }, [props.visible]);

  var tagClass = (0, _classnames2.default)(tagPrefix, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(tagPrefix, "-line"), type === 'line'), (0, _defineProperty2.default)(_classnames, "".concat(tagPrefix, "-fill"), type === 'fill'), (0, _defineProperty2.default)(_classnames, "".concat(tagPrefix, "-").concat(endSize), endSize), (0, _defineProperty2.default)(_classnames, "".concat(tagPrefix, "-").concat(color), isInnerColor), (0, _defineProperty2.default)(_classnames, "".concat(tagPrefix, "-hidden"), !iconVisible), (0, _defineProperty2.default)(_classnames, "".concat(tagPrefix, "-disabled"), disabled), (0, _defineProperty2.default)(_classnames, "".concat(tagPrefix, "-closable"), closable), _classnames), className); // 过长省略

  var ellipsisStyle;

  if (width || maxWidth) {
    ellipsisStyle = {
      width: width,
      maxWidth: maxWidth,
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    };
  } // 整合样式


  var tagStyle;

  if (!isInnerColor && type === 'line') {
    tagStyle = (0, _objectSpread2.default)({
      backgroundColor: '#ffffff',
      color: color || '#262626',
      borderColor: color || '#D9D9D9'
    }, style);
  }

  if (!isInnerColor && type === 'fill') {
    var hasBg = color || '#F2F2F6';
    var textColor = color ? '#fffff' : '#262626';
    tagStyle = (0, _objectSpread2.default)({
      backgroundColor: hasBg,
      color: textColor,
      border: 'none'
    }, style);
  }

  var endStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ellipsisStyle), tagStyle); // 关闭 ICON

  var handleCloseClick = function handleCloseClick(e) {
    e.stopPropagation();
    onClose === null || onClose === void 0 ? void 0 : onClose(e); // console.log(e,props,'e')

    /* 事件的默认动作已被取消 如果传入此就取消 */

    if (e.defaultPrevented) {
      return;
    }

    if (!('visible' in props)) {
      setIconVisible(false);
    }
  }; // 渲染ICON


  var renderCloseIcon = function renderCloseIcon() {
    if (closable) {
      return /*#__PURE__*/_react.default.createElement("span", {
        className: "".concat(tagPrefix, "-close-icon"),
        onClick: handleCloseClick
      }, closeIcon || /*#__PURE__*/_react.default.createElement(CloseLine, {
        onClick: handleCloseClick
      }));
    }

    return null;
  }; // 渲染text


  var renderTextNode = iconNode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
    className: "".concat(tagPrefix, "-icon-node")
  }, " ", iconNode), /*#__PURE__*/_react.default.createElement("span", {
    className: "".concat(tagPrefix, "-text-node")
  }, children)) : /*#__PURE__*/_react.default.createElement("span", null, children) // children
  ;
  var tagProps = (0, _omit.default)(props, ['visible', 'closable', 'iconNode', 'width', 'color']);

  var tagNode = /*#__PURE__*/_react.default.createElement("span", Object.assign({}, tagProps, {
    className: tagClass,
    style: endStyle
  }), renderTextNode, renderCloseIcon());

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", tagNode, " ");
};

Tag.displayName = 'Tag';
var _default = Tag;
exports.default = _default;