<template>
    <!-- in one row intentionally, because of css white-space:pre-line; -->
    <div v-if="tileDisplay" class="key-tag-tile" :style="'background: '+color+';'+(tag.is_recommended ? ' color: #fff;' : '')" @click="$emit('click')"><span>{{ tileDisplay ? wrapDisplayNameAtAnd(tag.display_name) : tag.display_name }}</span></div>
    <span v-else class="tag" :style="'background: '+color+';'+(tag.is_recommended ? ' color: #fff;' : '')" @click="$emit('click')">{{ tag.display_name }}</span>
</template>

<script lang="ts">
import Color from 'color';

export default {
  props: {
    tag: {
      type: Object,
    },
    category: {
      type: Object,
      default() {
        return {
          color: '#ED1656'
        }
      }
    },
    selected: {
      type: Array,
    },
    tileDisplay: {
      type: Boolean
    }
  },
  computed: {
    color() {
      if (this.tag.is_recommended && (this.matching || this.tag.matching)) return Color(this.category.color).darken(0.5);
      if (this.tag.is_recommended) return this.category.color;
      if (this.tag.matching || this.matching) return '#CCCCCC';
      return '#EFEFEF';
    },
    matching() {
      if (this.selected) {
        const isAdded = this.selected.find(stag => stag.value === this.tag.value);
        if (isAdded) {
          return true;
        }
      }
      return false;
    },
  },
  methods: {
    wrapDisplayNameAtAnd(displayName) {
      return displayName.replace("&", "&\n").replace("+", "+\n");
    } 
  }
}
</script>

<style scoped lang="css">
  .tag {
    display: inline-block;
    position: relative;
    top: 6px;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 8px;
    margin-right: 6px;
  }

  .key-tag-tile {
    display: flex;
    align-items:center;
    justify-content: center;
    width:calc(33% - 4px);
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 4px;
    margin-top:4px;
    text-align:center;
  }

  .key-tag-tile span {
    white-space:pre-line;
    text-align:center;
    font-size:13px;
    min-height:30px;
    display:flex;
    align-items:center;
  }
</style>
