<template>
  <BackgroundImageLoader :image-url="imageUrls[activeIndex]"
                         @imageLoaded="handleImageLoaded"
  >
    <template slot="overlay">
      <slot name="overlay"></slot>
    </template>
  </BackgroundImageLoader>
</template>

<script>
import imageLoader from '~/mixins/imageLoader.js'
import BackgroundImageLoader from '@/components/BackgroundImageLoader'

export default {
  components: {
    BackgroundImageLoader,
  },

  mixins: [ imageLoader ],

  props: {
    imageUrls: {
      type: Array,
      required: true,
    },

    activeIndex: {
      type: Number,
      required: false,
      default () {
        return 0
      }
    }
  },

  data () {
    return {
      currentlyLoadingIndex: 1,
      errorUrls: [],
    }
  },

  mounted () {
    if (this.imageUrls.length > 1) {
      setTimeout(() => {
        this.preloadImage()
      }, 100) // timeout so events get fired - don't know why that is yet TODO - investigate properly
    }
  },

  methods: {
    preloadImage () {
      this.loadImage(this.imageUrls[this.currentlyLoadingIndex])
        .then(img => {
          this.$emit('imageLoaded', img)
          this.currentlyLoadingIndex++
          if (this.currentlyLoadingIndex < this.imageUrls.length) {
            this.preloadImage()
          }
        })
        .catch(err => {
          // TODO handle error cases
          console.log('imageloaded ERROR', err)
        })
    },

    handleImageLoaded () {
      this.$emit('imageLoaded', this.imageUrls[this.activeIndex])
    }
  }
}
</script>

<style lang="scss" scoped>
</style>