Vue.component('image-viewer', {
  props: {
    'images': {
      type: Array,
      default: ()=>([])
    },
    'hideIndicator': {
      type: Boolean,
      default: false
    },
    'maxHeight': {
      type: [Number, String],
    },
  },
  inject: ['_get'],
  data: ()=>({
    showMore: false,
    overlay: false,
    index: 0,
  }),
  computed: {
  },
  mounted () {
  },
  methods: {
    getViewerHeight () {
      return this._get(this.$refs,'carousel.$el.offsetHeight',0);
    },
    zoomIn () {
      this.overlay = true;
      document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=10.0, user-scalable=1");
    },
    zoomOut () {
      this.overlay = false;
      document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0");
    },
    prevImage() {
      this.index = (this.index-1+this.images.length)%this.images.length;
    },
    nextImage() {
      this.index = (this.index+1+this.images.length)%this.images.length;
    }
  },
  template: 
`<template>
<div>
  <v-overlay v-model="overlay" :opacity="0.9">
    <!-- close btn -->
    <v-btn
      icon
      right
      top
      fixed
      outlined
      small
      @click="overlay=false;"
      style="z-index:1;"
    >
      <v-icon>mdi-close</v-icon>
    </v-btn>
    <!-- content -->
    <v-row no-gutters style="width:90vw" align="center">
      <v-col>
        <v-img
        contain
        height="90vh"
        :src="_get(images, ''+index+'.url', '#')"
        :alt="'Product Image-'+(index+1)"
        >
        </v-img>
      </v-col>
      <v-btn v-if="images.length>1" fixed left icon small style="background-color: rgba(0,0,0,0.2)" @click="prevImage()">
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
      <v-btn v-if="images.length>1" fixed right icon small style="background-color: rgba(0,0,0,0.2)" @click="nextImage()">
        <v-icon>mdi-chevron-right</v-icon>
      </v-btn>
    </v-row>
  </v-overlay>
  <!-- carousel -->
  <v-fade-transition>
    <v-row dense v-if="images.length>0">
      <v-col cols="12">
        <div :style="'position: relative; overflow: hidden; transition: max-height 1.3s ease-in-out;'+(showMore?(getViewerHeight()>0?'max-height: '+getViewerHeight()+'px;':''):'max-height: 500px;')">
          <v-carousel
            ref="carousel"
            hide-delimiter-background
            :hide-delimiters="(images.length <=1) ||!hideIndicator"
            :height="(maxHeight==null)?'inherit':maxHeight"
            :show-arrows="false"
            v-model="index"
            class="small-delimiter"
            style="position: relative;"
          >
            <v-carousel-item
              v-for="(img, i) in images"
              :key="i"
            >
              <v-card 
                :color="img.loaded?'white':'transparent'" 
                height="100%" 
                :style="(getViewerHeight()<=500||showMore)?'':'cursor: auto'" 
                @click="(e)=>{
                  (getViewerHeight()<=500||showMore)?
                    zoomIn():
                    ((!showMore)?(showMore=!showMore):'')
                }">
                <!-- <v-img
                  style="position:absolute; left:0; top:0; filter: blur(12px);-webkit-filter: blur(12px);"
                  height="100%"
                  :src="img.url"
                  :alt="'Product Image-'+(i+1)"
                ></v-img> -->
                <v-img
                  contain
                  height="100%"
                  @load="img.loaded=true;$forceUpdate()"
                  :src="img.url"
                  :alt="'Product Image-'+(i+1)"
                >
                  <template v-slot:placeholder>
                    <v-skeleton-loader
                      height="100%"
                      width="100%"
                      class="mx-auto"
                      type="image"
                    ></v-skeleton-loader>
                  </template>
                </v-img>
              </v-card>
            </v-carousel-item>
            <!-- controller -->
            <v-btn v-if="images.length>1" absolute icon small style="top: 50%; left:16px; background-color: rgba(0,0,0,0.2)" @click="prevImage()">
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
            <v-btn v-if="images.length>1" absolute icon small style="top: 50%; right:16px; background-color: rgba(0,0,0,0.2)" @click="nextImage()">
              <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
            <v-btn absolute icon small bottom color="grey lighten-1" style="right:16px;" @click="zoomIn()">
              <v-icon style="text-shadow: 0px 0px 1px black, 0px 0px 2px white;">mdi-magnify-plus-outline</v-icon>
            </v-btn>
          </v-carousel>
          <v-tabs v-model="index" height="50px" centered center-active show-arrows icons-and-text v-if="!hideIndicator">
            <v-tab
              v-for="(img, i) in images"
              :key="i"
              class="pa-0"
              style="min-width: 50px"
            >
              <v-img
                :src="img.url"
                height="100%"
                width="100%"
                :aspect-ratio="1"
                :alt="'Product thumbnail-'+(i+1)"
              >
                <template v-slot:placeholder>
                  <v-skeleton-loader
                    height="100%"
                    width="100%"
                    class="mx-auto"
                    type="image"
                  ></v-skeleton-loader>
                </template>
              </v-img>
            </v-tab>
          </v-tabs>
          <div 
            class="font-weight-bold white--text text-center" 
            style="
              position: absolute; 
              bottom: 0; left: 0; 
              width: 100%;
              padding-top: 8px; 
              padding-bottom: 4px; 
              cursor: pointer;
              background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,1))
            "
            v-if="getViewerHeight()>500"
            @click="showMore=!showMore"
          >
            <span v-if="!showMore">{{$t('viewer.expand')}}<v-icon color="white">mdi-chevron-down</v-icon></span>
            <span v-else>{{$t('viewer.collapse')}}<v-icon color="white">mdi-chevron-up</v-icon></span>
          </div>
        </div>
      </v-col>
    </v-row>
  </v-fade-transition>
</div>
</template>`
});