<template>
  <div class="input-field">
    <input type="text" :title="data.name" v-model="computedValue" v-if="type === 'text'" />
    <input type="checkbox" :title="data.name" v-model="computedValue" v-if="type === 'checkbox'" />
    <textarea :title="data.name" v-model="computedValue" v-if="type === 'textarea'"></textarea>
    <wysiwyg v-model="computedValue" v-if="type === 'wysiwyg'" />
    <image-selector v-model="computedValue" v-if="type === 'media'" />
    <image-selector multi v-model="computedValue" v-if="type === 'media_multi'" />
  
    <template v-if="type === 'radios'">
      <template v-for="(option, index) in data.options">
        <input :id="uniqueName + '_' + index" type="radio" :title="data.name" :name="uniqueName" :value="(typeof option === 'object') ? option.key : option" checked="checked" v-model="computedValue" v-if="!computedValue && index === 0" />
        <input :id="uniqueName + '_' + index" type="radio" :title="data.name" :name="uniqueName" :value="(typeof option === 'object') ? option.key : option" v-model="computedValue" v-else />
        <label :for="uniqueName + '_' + index">{{ (typeof option === 'object') ? option.value : option }}</label>
      </template>
    </template>
    
    <template v-if="type === 'o_embed'">
      <input type="text" :title="data.name" v-model="computedValue.url" v-if="typeof computedValue === 'object'" />
      <input type="text" :title="data.name" v-model="computedValue" v-else />
      <a class="icon-container" @click.stop="openLibraryPicker">
        <i class="fas fa-images"></i>
      </a>
      <file-library-modal images videos @close="showFileLibraryModal = false" v-model="computedValue" v-show="!!showFileLibraryModal" />
    </template>
  
    <template v-if="type === 'video_embed'">
      <input type="text" :title="data.name" v-model="computedValue.url" v-if="typeof computedValue === 'object' && !!computedValue" />
      <input type="text" :title="data.name" v-model="computedValue" v-else />
      <a class="icon-container" @click.stop="openLibraryPicker">
        <i class="fas fa-images"></i>
      </a>
      <file-library-modal videos @close="showFileLibraryModal = false" v-model="computedValue" v-show="!!showFileLibraryModal" />
    </template>
  </div>
</template>

<script>
  export default {
    props: [ "value", "data", "uniqueName", "disabled" ],
    data() {
      return {
        showFileLibraryModal: false
      }
    },
    computed: {
      type: function() {
        return this.data.type.toLowerCase();
      },
      computedValue: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('input', val);
        }
      }
    },
    methods: {
      openLibraryPicker() {
        console.log("Opening library picker.....");
        this.showFileLibraryModal = true;
      },
      removeImages() {
        console.log("Removing images.....");
      }
    }
  }
</script>