<template>
  <div
    class="vc-tag"
    data-test="tag"
    :class="tagClasses"
    v-bind="$attrs"
  >
    <span
      v-if="prefixIcon"
      class="vc-tag--prefix-icon"
    >
      <i :class="prefixIcon" />
    </span>
    <span class="vc-tag--content">
      <i
        v-if="icon"
        :class="icon"
        class="vc-tag--icon"
      />
      <span
        :style="maxWidth"
        class="vc-tag--label"
      >
        <slot name="label">{{ label }}</slot>
      </span>
    </span>
    <span
      v-if="closable && !disabled"
      class="vc-tag--actions"
    >
      <i
        class="vc-icon-close icon-xs"
        @click.stop="onClose"
      />
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { convertToUnit } from '@/utils/helpers'
import { VcTagColorType } from './VcTag.types'

const CLASS_BORDERLESS = 'vc-tag--borderless'
const CLASS_DISABLED = 'vc-tag--disabled'
const CLASS_COLOR = 'vc-tag-color--'
const CLASS_SQUARE = 'vc-tag--square'

export default defineComponent({
  name: 'VcTag',
  props: {
    color: {
      type: String as PropType<VcTagColorType>,
      default: 'primary'
    },
    icon: {
      type: String,
      default: ''
    },
    prefixIcon: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    closable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    borderless: {
      type: Boolean,
      default: false
    },
    maxContent: {
      type: [Number, String],
      default: ''
    },
    square: {
      type: Boolean,
      default: false
    }
  },
  emits: ['on-close'],
  computed: {
    maxWidth () {
      if (!this.maxContent) {
        return ''
      }
      const size = convertToUnit(this.maxContent) as string
      return `max-width: ${size}`
    },
    tagClasses () {
      return [
        {
          [CLASS_BORDERLESS]: this.borderless,
          [CLASS_DISABLED]: this.disabled,
          [CLASS_SQUARE]: this.square
        },
        `${CLASS_COLOR + this.color}`
      ]
    }
  },
  methods: {
    onClose (evt: MouseEvent): void {
      this.$emit('on-close', evt)
    }
  }
})
</script>

<style lang="scss" scoped>
  @mixin colorsAction($color) {
    &-color--#{$color} {
      @apply border-current text-#{$color}-actions;
      .vc-tag--prefix-icon, .vc-tag--content .vc-tag--icon {
        @apply text-#{$color}-actions;
      }
    }
  }

  .vc-tag {
    @apply w-max inline-flex border border-current px-3 rounded-tag transition;
    &--prefix-icon, &--content, &--actions {
      @apply flex items-center py-1;
    }
    &--prefix-icon {
      @apply border-r border-ui-lines pr-2 mr-2 text-base text-current;
    }
    &--content {
      .vc-tag--icon {
        @apply text-base mr-1 text-current;
      }
      .vc-tag--label {
        @apply text-default-text text-xs truncate;
      }
    }
    &--actions {
      @apply ml-4;
      i {
        @apply cursor-pointer text-inactive-elements hover:text-active-elements transition;
      }
    }

    @include colorsAction(primary);
    @include colorsAction(secondary);
    @include colorsAction(destructive);
    @include colorsAction(success);
    @include colorsAction(warning);

    &--borderless {
      @apply bg-default-bg border-default-bg;
      .vc-tag--prefix-icon {
        @apply border-white;
      }
    }

    &--square {
      @apply rounded-sm;
    }

    &--disabled {
      @apply opacity-50 pointer-events-none;
    }
  }

  [dir='rtl'] .vc-tag {
    &--prefix-icon {
      @apply border-l border-r-0 pl-2 ml-2 pr-0 mr-0;
    }
    &--content {
      .vc-tag--icon {
        @apply mr-0 ml-1;
      }
    }
    &--actions {
      @apply ml-0 mr-4;
    }
  }

</style>
