<template>
  <div
    class="q-chips group textfield"
    :class="{active: active, disabled: disable, readonly: readonly}"
  >
    <span
      class="chip label bg-light text-grey-9"
      v-for="(label, index) in value"
      :key="index"
    >
      {{ label }}
      <i class="on-right" @click="remove(index)">close</i>
    </span>
    <div class="q-chips-input chip label text-grey-9">
      <mautocomplete v-model="input" @search="search" :id="id" @selected="selected" :min-characters="0" :max-results="100">
      <input
        type="text"
        class="no-style"
        ref="input"
        v-model="input"
        @keyup.enter="add()"
        @focus="active = true"
        @blur="active = false"
        :disabled="disable"
        :placeholder="placeholder"
        tabindex="0"
        style="text-align:left"
      >
      </mautocomplete>
      <button class="small" @click="add()" :class="{invisible: !input.length}">
        <i>send</i>
      </button>
    </div>
  </div>
</template>

<script>
import mautocomplete from '../autocomplete/Autocomplete'
import { Dialog } from 'quasar'
export default {
  props: {
    value: {
      type: Array,
      required: false
    },
    keys: {
      type: Array,
      required: true
    },
    id: {
      type: String,
      default: ''
    },
    search: {
      type: Function,
      default: (term, done) => {
        done([])
      }
    },
    disable: Boolean,
    readonly: Boolean,
    placeholder: String
  },
  data () {
    return {
      active: false,
      input: ''
    }
  },
  created () {
    // console.log('crated')
  },
  methods: {
    contains (a, obj) {
      for (var i = 0; i < a.length; i++) {
        if (a[i] === obj) {
          return true
        }
      }
      return false
    },
    selected (item) {
      // console.log('chips selected:' + item.value)
      this.add(item.value, item.label)
    },
    add (value = this.input, label) {
      // console.log(this.value)
      // console.log('chips add:' + value + 'label:' + label)
      console.log('chips value:' + this.value.concat([value]))
      console.log('chips key:' + this.keys.concat([value]))
      if (this.contains(this.value, value) === false) {
        if (!this.disable && !this.readonly && value) {
          this.$emit('add', value)
          this.$emit('input', this.value.concat([value]), this.keys.concat([value]))
          this.input = ''
        }
      }
      else {
        Dialog.create({
          title: this.$t('global.dialog.title_Message'),
          message: this.$t('global.dialog.message_duplicate_selectd')
        })
        this.input = ''
      }
    },
    remove (index) {
      // console.log('chips remove:' + index + ',' + this.value[index])
      if (!this.disable && !this.readonly && index >= 0 && index < this.value.length) {
        let value = this.value.slice(0)
        this.$emit('remove', this.value[index])
        value.splice(index, 1)
        this.$emit('input', value)
      }
    },
    focus () {
    }
  },
  components: {mautocomplete}
}
</script>
