<template>
  <q-select
    v-model="computedModel"
    v-bind="childProps"
    @filter="filter"
  >
    <slot
      v-for="(_, name) in $slots"
      :slot="name"
      :name="name"
    />
    <template
      v-for="(_, name) in $scopedSlots"
      :slot="name"
      slot-scope="slotData"
    >
      <slot
        :name="name"
        v-bind="slotData"
      />
    </template>
  </q-select>
</template>

<script>
/* eslint-disable vue/require-default-prop */

import QSelect from 'quasar/src/components/select/QSelect.js';

export default {
  props: { ...QSelect.options.props },
  data() {
    return {
      childProps: null,
    };
  },
  computed: {
    computedModel: {
      get() {
        if (this.value && this.childProps.multiple && this.childProps.emitValue) {
          const needle = this.value;
          return this.options.filter(v => needle.includes(v.value));
        }
        return this.value;
      },
      set(val) {
        if (val && this.childProps.multiple && this.childProps.emitValue) {
          this.$emit('input', val.map((v) => {
            if (v.value) {
              return v.value;
            }
            return v;
          }));
        } else {
          this.$emit('input', val);
        }
        this.childProps.options = [...this.options];
      },
    },
  },
  watch: {
    options(val) {
      this.childProps.options = [...val];
    },
  },
  created() {
    this.childProps = { ...this.$props };
  },
  methods: {
    filter(val, update, next) {
      update(() => {
        if (val === '') {
          this.childProps.options = [...this.options];
        } else {
          const needle = val.toLowerCase();
          const key = this.optionLabel || 'label';
          this.childProps.options = this.options.filter((v) => {
            if (typeof v === 'string') {
              return v.toLowerCase().indexOf(needle) > -1;
            }
            return v[key].toLowerCase().indexOf(needle) > -1;
          });
        }
        next();
      });
    },
  },
};
</script>

<style scoped>

</style>