<template>
  <q-dialog v-model="show" persistent>
    <q-card style="width: 25em;">
      <q-card-section>
        <q-select
          v-model="image"
          :label="$t('image')"
          :options="images"
          @filter="onFilter"
          option-value="name"
          option-label="name"
          @new-value="onAdd"
          input-debounce="250"
          emit-value
          clearable
          use-input
          hide-selected
          fill-input>
          <template v-slot:option="scope">
            <q-item
              v-bind="scope.itemProps"
              v-on="scope.itemEvents">
              <q-item-section avatar>
                <q-avatar>
                  <img :src="`${$imageBase}/${collection}/200x200/${scope.opt.name}`">
                </q-avatar>
              </q-item-section>
              <q-item-section>
                <q-item-label>{{scope.opt.name}}</q-item-label>
              </q-item-section>
            </q-item>
          </template>
          <template v-slot:prepend>
            <q-avatar>
              <img :src="`${$imageBase}/${collection}/200x200/${image}`">
            </q-avatar>
          </template>
          <template v-slot:after>
            <q-btn
              icon="add_a_photo"
              @click="showUploader = !showUploader"
              :title="$t('edit')"
              :disable="!image"
              :color="showUploader ? 'primary' : null"
              flat
              round
              dense/>
          </template>
        </q-select>
        <q-slide-transition>
          <q-uploader
            ref="uploader"
            v-show="showUploader"
            :url="`${$apiBase}/Images/upload`"
            :form-fields="formFields"
            auto-upload
            class="q-mt-md"
            flat
            bordered/>
        </q-slide-transition>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn
          :label="$t('cancel')"
          @click="onCancel"
          color="primary"
          flat/>
        <q-btn
          :label="$t('accept')"
          @click="onAccept"
          color="primary"
          flat/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: 'ImageEditor',
  props: {
    value: {},
    collection: {
      type: String,
      required: true
    },
    show: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      image: null,
      showUploader: false,
      images: []
    }
  },
  watch: {
    image () {
      if (this.$refs.uploader) {
        this.$refs.uploader.reset()
      }
      if (!this.image) {
        this.showUploader = false
      }
    },
    value () {
      this.image = this.value
    },
    showUploader () {
      this.$refs.uploader.reset()
    },
    show () {
      if (!this.show) {
        this.showUploader = false
      }
    }
  },
  methods: {
    onFilter (val, update, abort) {
      let filter = {
        where: {
          name: { like: `${val}%` },
          collectionFk: this.collection
        },
        limit: !val || val.length < 2 ? 50 : undefined
      }
      this.$axios.get(`Images`, { params: { filter } })
        .then(res => {
          update(() => (this.images = res.data))
        })
        .catch(() => abort())
    },
    onAdd (inputValue, done) {
      done({ name: inputValue }, 'toggle')
      this.showUploader = true
      // this.$refs.uploader.pickFiles()
    },
    onAccept () {
      this.$emit('input', this.image)
      this.$emit('response', 'accept')
    },
    onCancel () {
      this.image = this.value
      this.$emit('response', 'cancel')
    },
    formFields () {
      return [
        {
          name: 'collectionFk',
          value: this.collection
        }, {
          name: 'name',
          value: this.image
        }
      ]
    }
  }
}
</script>
