<template>
  <img
    :class="[
      componentClass,
      {
        'c-lazy-image': lazyLoading,
        'c-loaded': loaded
      }
    ]"
    :alt="getAlt"
    :src="getSrc"
    @load="load"
  />
</template>

<script>
const props = {
  dataFieldIdent: {
    type: String,
    default: null
  },
  dataFieldIdent4Alt: {
    type: String,
    default: null
  },
  emptyImageIconPath: {
    type: String,
    default: "public/images/EmptyImageIcon.png"
  },
  srcToPrepare: {
    type: String,
    default: null
  },
  src: {
    type: String,
    default: null
  },
  srcPlaceholder: {
    type: String,
    default: null,
  },
  alt: {
    type: String,
    default: null
  },
  intersectionObserverOptions: {
    type: Object,
    default: () => ({}),
  },
  lazyLoading: {
    type: Boolean,
    default: true
  },
  sourceKind: {
    type: String,
    default: "rows"
  }
}

import base from './c-base'
import stringUtils from '../classes/stringUtils'

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-image',
      observer: null,
      intersected: false,
      loaded: false
    }
  },
  props,
  computed: {
    getAlt: function () {
      if (this.alt !== null)
        return this.alt
      return this.getDataFieldValue(this.dataFieldIdent4Alt)
    },
    getSrc: function () {
      if (this.lazyLoading && !this.intersected) {
        if (this.srcPlaceholder) {
          return this.srcPlaceholder;
        }
        return
      }
      if (this.src !== null) {
        return this.src
      }
      let dataValue = null
      let src = null
      if (this.srcToPrepare !== null) {
        dataValue = this.srcToPrepare 
      } else {
        dataValue = this.getDataFieldValue(this.dataFieldIdent) 
      }
      if (dataValue !== null && dataValue !== undefined) {
        let fileIdentNameArray = dataValue.split("/");
        let fileIdent = (fileIdentNameArray.length > 1) ? fileIdentNameArray[0] : dataValue
        let fileExt = stringUtils.getFileExtension(fileIdent)
        let fileIdentSplit = fileIdent.split('|')
        if (!stringUtils.isEmpty(fileExt) && fileIdentSplit.length == 4) {
          fileIdent = fileIdent.slice(0, (fileExt.length + 1) * (-1));
        }
        let filename = (fileIdentNameArray.length > 1) ? fileIdentNameArray[fileIdentNameArray.length - 1] : fileIdent;
        if ((stringUtils.isEmpty(fileExt) === true) && (fileIdentNameArray.length > 1)) {
          fileExt = stringUtils.getFileExtension(filename)
        }
        if (filename != null) {
          filename = filename.replace(new RegExp("\\|", "g"), "_");
          if (stringUtils.isEmpty(fileExt) === true)
            filename += '.png'
        }
        src = this.getAPIImageServerURL(fileIdent, filename)
      }
      if (src == null && this.state === 1)
        src = this.emptyImageIconPath
      return src
    },
    getIntersectionObserverOptions: function() {
      let defaultintersectionObserverOptions = {
        rootMargin: '0px 0px 25% 0px'
      }
      return {...defaultintersectionObserverOptions, ...this.intersectionObserverOptions}
    }
  },
  methods: {
    load() {
      if (this.$el.getAttribute("src") !== this.srcPlaceholder) {
        this.loaded = true;
      }
    }
  },
  mounted() {
    if (!this.lazyLoading) return
    if ('IntersectionObserver' in window) {
      this.observer = new IntersectionObserver((entries) => {
        const image = entries[0]
        if (image.isIntersecting) {
          this.intersected = true
          this.observer.disconnect()
        }
      }, this.getIntersectionObserverOptions)
      this.observer.observe(this.$el)
    }
  },
  destroyed() {
    if (!this.lazyLoading) return
    if ('IntersectionObserver' in window) {
      this.observer.disconnect()
    }
  }
}</script>

