import Vue from 'vue'
import Vuetify, {
  VCombobox
} from 'vuetify/lib'

export default function makeCombobox(repositoryName) {
  return Vue.component('combobox', {
    inject: [repositoryName],
    components: { VCombobox },
    render (createElement) {
      const self = this

      return createElement('v-combobox', {
        attrs: {
          required: true
        },
        domProps: {
          value: self.value
        },
        props: {
          'item-value': 'id',
          'item-text': 'name',
          items: this.items,
          loading: this.loading,
          label: this.label,
          clearable: true,
          rules: this.rules
        },
        on: {
          'update:searchInput': this.handleSearch,
          click: this.itemsManagerData,
          input: this.handleInput
        }
      },
      [
        createElement('span', { slot: 'no-data' }, 'Não tem usuários')
      ])
    },
    props: {
      label: {
        type: String,
        required: true
      },
      searchApi: {
        type: Boolean,
        required: true
      },
      returnObject: {
        type: Boolean,
        default: false,
        required: false
      },
      rules: {
        type: Array,
        required: false
      }
    },
    mounted () {
      this.itemsManagerData()
    },
    data () {
      return {
        id: '',
        items: [],
        loading: false,
        selectedItem: ''
      }
    },
    methods: {
      itemsManagerData(search = '') {
        return this[repositoryName].get({ search }).then(({data}) => {
          this.items = data;
        })
          .catch((err) => {
            console.log(err);
          });
      },
      async handleSearch (name) {
        if(!this.searchApi) return

        this.loading = true
        await this.itemsManagerData(name)

        if(!this.items.length) {
          this.loading = 'warning'
        } else {
          this.loading = false
        }
      },
      handleInput (objectValue) {
        if (objectValue && objectValue.hasOwnProperty('id')) {
          const returneValue = this.returnObject ? objectValue : objectValue.id

          this.$emit('input', returneValue)
        }
      }
    }
  })
}