<template>
  <span class="tag text-capitalize" :class="className" :title="title">
    <slot>{{ label }}</slot>
    <eb-icon
      class="ml-1"
      type="x-circle"
      v-if="isFilter"
      aria-label="Clear filter"
      @click="$emit('remove')"
      tabindex="0"
      @keydown.enter.prevent="$emit('remove')"
      @keydown.space.prevent
      @keyup.space.prevent="$emit('remove')"
    />
  </span>
</template>

<script>
import EbIcon from '../eb-icon/eb-icon';

const componentsTags = [
  'filter',
  'red',
  'magenta',
  'purple',
  'blue',
  'cyan',
  'teal',
  'green',
  'gray',
  'completed',
  'avatar'
];

export default {
  name: 'EbTag',
  components: { EbIcon },
  props: {
    label: { type: String, required: true },
    kind: {
      type: String,
      default: componentsTags[0],
      validator(val) {
        return componentsTags.includes(val);
      }
    },
    rounded: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isFilter() {
      return this.kind === 'filter';
    },
    title() {
      return this.isFilter ? 'Close filter' : null;
    },
    className() {
      return [
        `tag-${this.kind} ${this.rounded ? 'tag-rounded' : ''}`,
        { 'tag--filter': this.isFilter }
      ];
    }
  }
};
</script>

<style scoped>
.text-capitalize {
  text-transform: capitalize;
}
.tag {
  font-size: 0.75rem;
  margin: 0.1rem;
  color: #6e7687;
  background-color: #e9ecef;
  border-radius: 3px;
  padding: 0 0.5rem;
  line-height: 2em;
  display: -ms-inline-flexbox;
  display: inline-flex;
  cursor: default;
  font-weight: 400;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a.tag {
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s color, 0.3s background;
}

a.tag:hover {
  background-color: rgba(110, 118, 135, 0.2);
  color: inherit;
}

.tag-blue,
.tag-completed {
  background-color: #467fcf;
  color: #fff;
}

.tag-indigo {
  background-color: #6574cd;
  color: #fff;
}

.tag-purple {
  background-color: #a55eea;
  color: #fff;
}

.tag-pink {
  background-color: #f66d9b;
  color: #fff;
}

.tag-red,
.tag-rejected {
  background-color: #cd201f;
  color: #fff;
}

.tag-orange,
.tag-shortlisted {
  background-color: #fd9644;
  color: #fff;
}

.tag-yellow,
.tag-pending {
  background-color: #f1c40f;
  color: #fff;
}

.tag-green {
  background-color: #5eba00;
  color: #fff;
}

.tag-teal,
.tag-approved {
  background-color: #2bcbba;
  color: #fff;
}

.tag-cyan,
.tag-accepted {
  background-color: #17a2b8;
  color: #fff;
}

.tag-white {
  background-color: #fff;
  color: #fff;
}

.tag-gray {
  background-color: #868e96;
  color: #fff;
}

.tag-gray-dark,
.tag-archived {
  background-color: #343a40;
  color: #fff;
}

.tag-azure {
  background-color: #45aaf2;
  color: #fff;
}

.tag-lime {
  background-color: #7bd235;
  color: #fff;
}

.tag-primary {
  background-color: #467fcf;
  color: #fff;
}

.tag-secondary {
  background-color: #868e96;
  color: #fff;
}

.tag-success,
.tag-active {
  background-color: #5eba00;
  color: #fff;
}

.tag-info {
  background-color: #45aaf2;
  color: #fff;
}

.tag-warning {
  background-color: #f1c40f;
  color: #fff;
}

.tag-danger {
  background-color: #cd201f;
  color: #fff;
}

.tag-light {
  background-color: #f8f9fa;
  color: #fff;
}

.tag-dark {
  background-color: #343a40;
  color: #fff;
}

.tag-rounded {
  border-radius: 50px;
}

.tag-rounded .tag-avatar {
  border-radius: 50px;
}
</style>
