<template>
  <img ref="img" :class="['video-scroll-image', {visible, displayed, loaded}]" :src="currentSrc"/>
</template>

<script lang="ts">
import {defineComponent, PropType, ref, Ref} from "vue";

export default defineComponent({
  name: "VideoScrollImage",
  props: {
    definition: {
      type: Object as PropType<VideoScrollImageDef>,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      currentSrc: undefined as undefined | string,
      displayed: false,
      loaded: false,
    };
  },
  watch: {
    visible() {
      if (!this.img) {
        return;
      }
      if (this.visible && !this.loaded) {
        console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
        this.currentSrc = this.definition.fullres;
        setTimeout(() => {
          this.displayed = true;
        }, 3000);
        this.img.onload = () => {
          this.displayed = true;
          this.loaded = true;
          // if (this.isHorizontal) {
          //   this.img!.style.height = "auto";
          // } else {
          //   this.img!.style.width = "auto";
          // }
        };
      }
    }
  },
  setup(props) {
    const img = ref<HTMLImageElement | null>(null);
    const currentSrc: Ref<string | undefined> = ref(undefined);

    return {
      img,
      currentSrc
    };
  }
});

export interface VideoScrollImageDef {
  fullres: string
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.video-scroll-image {
  position: absolute;
  image-rendering: optimizeSpeed;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s;
}

.video-scroll-image.visible {
  visibility: visible !important;
}

.video-scroll-image.loaded {
  background: transparent !important;
}

.video-scroll-image.displayed {
  background: gray;
  opacity: 1 !important;
}
</style>
