<template>
  <div class="tag-field">
    <TfTag
      v-for="(tag, tagIndex) of value"
      :key="tagIndex"
      :text="tag.text"
      :closable="tag.closable || closable"
      @close="onClose(tagIndex)"
    />
    <span
      v-if="placeholder && !value.length"
      class="placeholder"
      v-text="placeholder"
    />
  </div>
</template>

<script>
/**
 * WatchTower Tag Field
 *
 * @vuedoc
 * @exports TfForm/TfTagField
 * @category Components
 */

  export default {
    name: 'TfTagField',

    props: {
      placeholder: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: '',
      },
      closable: {
        type: Boolean,
        default: false,
      },
      value: {
        type: Array,
        default: () => [],
      },
    },
    methods: {
      /**
       * When a tag is close, remove it and emit an "input" event, per the v-model…model.
       *
       * @param {number} index
       */
      onClose(index) {
        const value = [...this.value];

        value.splice(index, 1);

        this.$emit('input', value);
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  .tag-field {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0 0 20px;
    border: 1px $tf-light-gray solid;
    border-radius: 2px;
    min-height: 49px;
  }

  .placeholder {
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 20px;
    color: $tf-medium-gray;
  }
</style>
