<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div :class="{'gutters': properties['Enable Gutters'].value}" class="photo_gallery">
      
      <div class="title-paragraph">
        <h1 class="title" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
        <p class="paragraph" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
      </div>
      
      <!-- Gallery if one image -->
      <div class="gallery gallery-of-1 gallery-of-less" v-if="!Array.isArray(properties['Images'].value)">
        <div class="image-container" v-if="properties['Images'].value">
          <div class="image" :style="galleryImageStyling(properties['Images'].value)"></div>
        </div>
      </div>
      
      <!-- Gallery if multiple images -->
      <div :class="multipleImageGalleryClasses()" v-if="Array.isArray(properties['Images'].value)">
        <div v-for="(image, index) in properties['Images'].value" :class="image.class" :data-image="index" v-if="image.url" class="image-container">
          <div class="image" :style="galleryImageStyling(image)"></div>
        </div>
      </div>
      
      <!-- Modal (only for multiple-image galleries) -->
      <div class="modal-mask" v-if="Array.isArray(properties['Images'].value)" hidden>
        <div class="modal-wrapper">
          <div class="modal">
            <div class="top-bar">
              <a class="close">
                <i class="fas fa-times fa-2x"></i>
              </a>
            </div>
            <div class="content">
              <div class="left">
                <a class="previous">
                  <i class="fas fa-angle-left fa-3x"></i>
                </a>
              </div>
              
              <div v-for="(image, index) in properties['Images'].value" :data-slide="index" v-if="image.url" :class="modalImageStyling(image, index)">
                <img :src="image.url"/>
                <p>{{image.caption}}</p>
              </div>
              
              <div class="right">
                <a class="next">
                  <i class="fas fa-angle-right fa-3x"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildablePhotoGallery",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      return JSON.parse(this.componentData);
    },
    methods: {
      galleryImageStyling: function (image) {
        return 'background-image: url(' + image.url + ')';
      },
      modalImageStyling: function (image, index) {
        return 'modal-image slide-' + index + ' ' + (image.lastClass || ''); // TODO: Ask Urban what lastClass is (doesn't exist anywhere rn)
      },
      multipleImageGalleryClasses: function () {
        let lessClass = (this.properties['Images'].value <= 4) ? 'gallery-of-less' : '';
        let imageCount = this.properties['Images'].value.length;
        return 'gallery gallery-of-' + imageCount + lessClass;
      },
      setMultipleImageClasses: function () {
        let smallTurn = false;
        for (let index = 0; index < this.properties['Images'].value.length; index++) {
          if (this.properties['Images'].value.length > 4) {
            if (!smallTurn) {
              this.properties['Images'].value[index].class = '';
            } else {
              this.properties['Images'].value[index].class = 'small left';
              if (index + 1 < this.properties['Images'].value.length) {
                this.properties['Images'].value[index + 1].class = 'small right';
              }
              index++;
            }
            smallTurn = !smallTurn;
          } else {
            this.properties['Images'].value[index].class = '';
          }
        }
      }
    },
    created() {
      // If multiple images, set their classes
      if (Array.isArray(this.properties['Images'].value)) {
        this.setMultipleImageClasses();
      }
    },
    mounted() {
      jQuery(".photo_gallery .gallery > .image-container").click(function (e) {
        e.stopPropagation();
        var index = jQuery(this).data("image");
        jQuery(this).closest(".photo_gallery").find(".modal-mask").show().css("display", "table");
        jQuery(this).closest(".photo_gallery").find(".modal-image").hide();
        jQuery(this).closest(".photo_gallery").find(".modal-image.slide-" + index).show().css("display",);

        if (index == 0) {
          jQuery(this).closest(".photo_gallery").find(".modal .previous").hide();
          jQuery(this).closest(".photo_gallery").find(".modal .next").show();
        }
        else if (index == jQuery(this).closest(".photo_gallery").find(".modal-image").length - 1) {
          jQuery(this).closest(".photo_gallery").find(".modal .previous").show();
          jQuery(this).closest(".photo_gallery").find(".modal .next").hide();
        }
        else {
          jQuery(this).closest(".photo_gallery").find(".modal .previous").show();
          jQuery(this).closest(".photo_gallery").find(".modal .next").show();
        }
      });

      jQuery(".photo_gallery .modal .previous").click(function (e) {
        e.preventDefault();
        var index = jQuery(this).closest(".modal").find(".modal-image:visible").data("slide") - 1;
        jQuery(this).closest(".photo_gallery").find(".modal-image").hide();
        jQuery(this).closest(".photo_gallery").find(".modal-image.slide-" + index).show();
        if (index == 0) {
          jQuery(this).closest(".photo_gallery").find(".modal .previous").hide();
        }
        else if (index == jQuery(this).closest(".photo_gallery").find(".modal-image").length + 1) {
          jQuery(this).closest(".photo_gallery").find(".modal .next").hide();
        }
        else {
          jQuery(this).closest(".photo_gallery").find(".modal .next").show()
        }
      });

      jQuery(".photo_gallery .modal .close").click(function (e) {
        e.preventDefault();
        jQuery(".modal-mask:visible").hide();
      });

      jQuery("body").keyup(function (e) {
        if (jQuery('.modal').is(':visible')) {
          var index = jQuery(".modal:visible").find(".modal-image:visible").data("slide");
          if (e.keyCode == 27) {
            jQuery(".modal-mask:visible").hide();
          }
          else if (e.keyCode == 37) {
            if (index > 0) {
              var newIndex = index - 1;
            }
          }
          else if (e.keyCode == 39) {
            if (index < jQuery(".photo_gallery .modal-image").length - 1) {
              var newIndex = index + 1;
            }
          }
          if (!!newIndex) {
            jQuery(".modal:visible .modal-image").hide();
            jQuery(".modal:visible .modal-image.slide-" + newIndex).show();

            if (newIndex == 1) {
              jQuery(".modal:visible .previous").hide();
            }
            else if (newIndex == jQuery(".photo_gallery .modal-image").length - 1) {
              jQuery(".modal:visible .next").hide();
            }
            else {
              jQuery(".modal:visible .previous").show();
              jQuery(".modal:visible .next").show();
            }
          }
        }
      });

      jQuery(".photo_gallery .modal .next").click(function (e) {
        e.preventDefault();
        var index = jQuery(this).closest(".modal").find(".modal-image:visible").data("slide") + 1;
        jQuery(this).closest(".photo_gallery").find(".modal-image").hide();
        jQuery(this).closest(".photo_gallery").find(".modal-image.slide-" + index).show();
        if (index == 1) {
          jQuery(this).closest(".photo_gallery").find(".modal .previous").hide();
        }
        else if (index == jQuery(this).closest(".photo_gallery").find(".modal-image").length - 1) {
          jQuery(this).closest(".photo_gallery").find(".modal .next").hide();
        }
        else {
          jQuery(this).closest(".photo_gallery").find(".modal .previous").show()
        }
      });
    }
  }
</script>

<style scoped>

</style>