<template>
  <div
      class="nv-tag"
      :class="[
        ...sizeableClasses,
        colorClass,
        {
          'nv-tag--closable': closable,
          'nv-tag--outlined': outlined,
          'nv-tag--icon-left': icon,
          'nv-tag--icon-right': iconRight,
        }
      ]"
      @click="handleClick"
  >
    <nv-icon v-if="icon" :icon="icon" class="nv-tag__icon-left"/>
    <span class="nv-tag__content">
      <slot/>
    </span>
    <nv-icon v-if="iconRight" :icon="iconRight" class="nv-tag__icon-right"/>
    <button v-if="closable" class="nv-tag__close" @click="handleClose">
      <nv-icon :icon="closeIcon"/>
    </button>
  </div>
</template>

<script>
import useSize, {useSizeProps} from "../../composables/sizeable";
import {NvIcon} from "./../NvIcon";

const TAG_COLORS = ["primary", "success", "warning", "alert"];

export default {
  name: "NvTag",
  components: {NvIcon},
  props: {
    ...useSizeProps,
    closable: Boolean,
    outlined: Boolean,
    icon: String,
    iconRight: String,
    closeIcon: {
      type: String,
      default: 'nvi-close'
    },
    color: {
      type: String,
      validator: (value) => TAG_COLORS.includes(value),
    },
  },
  setup(props, {emit}) {
    //---- Size
    const {sizeableClasses} = useSize(props);

    //---- Color
    const colorClass = TAG_COLORS.includes(props.color)
        ? `nv-tag--${props.color}`
        : "nv-tag--default";

    //---- Click
    const handleClose = (event) => {
      event.stopPropagation()
      emit('click:close', event)
    }
    const handleClick = (event) => {
      emit('click', event)
    }

    return {
      sizeableClasses,
      colorClass,
      handleClose,
      handleClick
    }
  }
}
</script>
