import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import { defineComponent } from "vue";
import { directives } from '../sunken';
import { getComponent, render } from '../_util/props-util';
import Icon from '../icon';
const prefixCls = 'x-tag';
const Tag = defineComponent({
  name: prefixCls,
  props: {
    closable: Boolean,
    closeIcon: [String, Object],
    color: String,
    icon: Object,
    round: Boolean,
    bordered: Boolean,
    nowrap: Boolean,
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: 'default'
    },
    onClose: Function
  },
  emits: ['close'],
  directives,

  setup(props, {
    slots,
    emit
  }) {
    function onClose(e) {
      e.stopPropagation();
      emit('close', e);
    }

    function onMousedown(e) {
      e.stopPropagation();
    }

    function renderCloseNode(vm) {
      let cls = `${prefixCls}-close-icon`;

      if (props.closable) {
        let node,
            icon = props.closeIcon || 'cross';

        if (typeof icon === 'string') {
          node = _createVNode(Icon, {
            "class": cls,
            "type": icon
          }, null);
        } else {
          node = _createVNode("div", {
            "class": cls
          }, [getComponent(vm, 'closeIcon')]);
        }

        node.props.onClick = onClose;
        node.props.onMousedown = onMousedown;
        return node;
      }
    }

    return vm => {
      var _slots$default;

      const {
        color,
        size,
        type
      } = props;
      const style = {
        backgroundColor: color
      };
      const cls = [prefixCls, `${prefixCls}-${size}`, `${prefixCls}-${type}`, {
        [`${prefixCls}-round`]: props.round,
        [`${prefixCls}-bordered`]: props.bordered,
        [`${prefixCls}-nowrap`]: props.nowrap
      }];
      const iconNode = render(props.icon);
      return _withDirectives(_createVNode("span", {
        "class": cls,
        "style": style
      }, [iconNode, (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), renderCloseNode(vm)]), [[_resolveDirective("sunken")]]);
    };
  }

});

Tag.install = app => {
  app.component(Tag.name, Tag);
};

export default Tag;