import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
// @ts-nocheck
import React from 'react';
import classnames from 'classnames';
import { ConfigContext } from '../config-provider/context';
import omit from '../components/rc-util/omit';
import { Icons } from '../components';
var CloseLine = 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.useContext(ConfigContext),
      getPrefixClassName = _React$useContext.getPrefixClassName,
      size = _React$useContext.size;

  var tagPrefix = getPrefixClassName('tag');

  var _React$useState = React.useState(true),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      iconVisible = _React$useState2[0],
      setIconVisible = _React$useState2[1];

  var endSize = customSize || size;
  var isInnerColor = INNER_COLORS.includes(color);
  React.useEffect(function () {
    if ('visible' in props) {
      setIconVisible(props.visible);
    }
  }, [props.visible]);
  var tagClass = classnames(tagPrefix, (_classnames = {}, _defineProperty(_classnames, "".concat(tagPrefix, "-line"), type === 'line'), _defineProperty(_classnames, "".concat(tagPrefix, "-fill"), type === 'fill'), _defineProperty(_classnames, "".concat(tagPrefix, "-").concat(endSize), endSize), _defineProperty(_classnames, "".concat(tagPrefix, "-").concat(color), isInnerColor), _defineProperty(_classnames, "".concat(tagPrefix, "-hidden"), !iconVisible), _defineProperty(_classnames, "".concat(tagPrefix, "-disabled"), disabled), _defineProperty(_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 = _objectSpread({
      backgroundColor: '#ffffff',
      color: color || '#262626',
      borderColor: color || '#D9D9D9'
    }, style);
  }

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

  var endStyle = _objectSpread(_objectSpread({}, 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.createElement("span", {
        className: "".concat(tagPrefix, "-close-icon"),
        onClick: handleCloseClick
      }, closeIcon || /*#__PURE__*/React.createElement(CloseLine, {
        onClick: handleCloseClick
      }));
    }

    return null;
  }; // 渲染text


  var renderTextNode = iconNode ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "".concat(tagPrefix, "-icon-node")
  }, " ", iconNode), /*#__PURE__*/React.createElement("span", {
    className: "".concat(tagPrefix, "-text-node")
  }, children)) : /*#__PURE__*/React.createElement("span", null, children) // children
  ;
  var tagProps = omit(props, ['visible', 'closable', 'iconNode', 'width', 'color']);
  var tagNode = /*#__PURE__*/React.createElement("span", Object.assign({}, tagProps, {
    className: tagClass,
    style: endStyle
  }), renderTextNode, renderCloseIcon());
  return /*#__PURE__*/React.createElement(React.Fragment, null, " ", tagNode, " ");
};

Tag.displayName = 'Tag';
export default Tag;