<template>
  <div class="image-selector" :class="{ multi: !!isMulti }">
    <div class="image-container" v-if="!isMulti && !!computedValue && !!computedValue.url">
      <div class="image" :style="'background-image: url(' + computedValue.url + ');'"></div>
    </div>
    <div class="images-container" v-else-if="!!computedValue && Array.isArray(computedValue)">
      <div class="image" :style="'background-image: url(' + image.url + ');'" v-for="image in computedValue"></div>
    </div>
    <div class="button-and-remove">
      <a class="button dark-gray" @click.stop="showFileLibraryModal = true">
        {{ (!isMulti) ? 'Select Image' : 'Select Images' }}
      </a>
      <a class="remove" @click="computedValue = null" v-if="!hideRemoveLink">
        {{ (!isMulti) ? 'Remove image' : 'Remove images' }}
      </a>
    </div>
    <file-library-modal images @close="showFileLibraryModal = false" v-model="computedValue" v-show="!!showFileLibraryModal" v-if="!isMulti" />
    <file-library-modal multi images @close="showFileLibraryModal = false" v-model="computedValue" v-show="!!showFileLibraryModal" v-else />
  </div>
</template>

<script>
  export default {
    props: [ "value", "multi", "noRemoveLink" ],
    data() {
      return {
        showFileLibraryModal: false,
        isMulti: this.multi === "",
        hideRemoveLink: this.noRemoveLink === ""
      }
    },
    computed: {
      computedValue: {
        get() {
          return (typeof this.value === "string") ? JSON.parse(this.value) : this.value;
        },
        set(val) {
          this.$emit('input', val);
        }
      }
    },
    methods: {
    
    }
  }
</script>