<template>
  <div class="transaction-tag-update field is-horizontal">
    <div class="field-label is-normal">
      <label class="label" for="tag">Catégorie</label>
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control has-icons-left">
          <span class="select is-fullwidth">
            <select v-model="tagLocale" name="tag" id="tag">
              <option
                v-for="(transactionTag, k) in transactionTagLabel"
                :key="k"
                :value="k">
                {{ transactionTag.label }}
              </option>
            </select>
          </span>
          <span class="icon is-small is-left" v-if="transactionTagLabel[tag]">
            <awe-icon :icon="transactionTagLabel[tag].icon" />
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Model, Watch } from 'vue-property-decorator'
import TransactionTag, { TransactionTagLabel } from '@/enums/TransactionTag'

@Component
export default class TransactionTagUpdate extends Vue {
  @Model('input', { type: String })
  public tag!: TransactionTag
  public tagLocale: TransactionTag = this.tag
  public transactionTagLabel: typeof TransactionTagLabel = TransactionTagLabel

  @Watch('tagLocale')
  public onTagChange(tag: TransactionTag) {
    if (tag !== this.tag) {
      this.$emit('input', tag)
    }
  }
}
</script>
