<script>
import Vue from 'vue'
import jQuery from 'jquery'
import 'slick-carousel'
import 'slick-carousel/slick/slick-theme.scss'
import 'slick-carousel/slick/slick.scss'
import Artworks from '../services/Artworks'
import PageQueue from '../stores/PageQueue'

export default {
  name: 'oeuvre',

  components: {},

  data() {
    return {
      artwork: {
        artist: {},
        audios: null,
        videos: null,
        images: null,
        similaires: null,
        exhibition: {},
      }
    }
  },

  created() {
    window.scrollTo(0, 0)
    this.loadArtworkFromRoute()
  },

  methods: {
    loadArtworkFromRoute() {
      const id = this.$route.params.artworkId

      Artworks.byId(id).then(data => {
        jQuery('#slickGallery').slick('unslick')
        this.artwork = data

        Vue.nextTick(() => {
          this.initGallerySlideshow()
          this.initSlickButtons()
        })
      })
    },

    hasArtist() {
      if (Array.isArray(this.artwork.artist) && this.artwork.artist.length === 0) {
        return false
      }
      return true
    },

    initSlickButtons() {
      jQuery('#slickButtons').slick({
        arrows: true,
        prevArrow: document.getElementById('arrow-left-categories'),
        nextArrow: document.getElementById('arrow-right-categories'),
        variableWidth: true,
        dots: false,
        infinite: false,
        draggable: true,
        speed: 500,
        slidesToShow: 4,
        responsive: [{
          breakpoint: 1600,
          settings: {
            slidesToShow: 3
          }
        }, {
          breakpoint: 1200,
          settings: {
            slidesToShow: 2
          }
        }, {
          breakpoint: 700,
          settings: {
            slidesToShow: 1
          }
        }]
      })
    },

    initGallerySlideshow() {
      jQuery('#slickGallery').slick({
        arrows: false,
        dots: true,
        appendDots: document.getElementById('slickGalleryNav'),
        infinite: true,
        autoplay: true,
        draggable: true,
        pauseOnHover: false,
        autoplaySpeed: 20000,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [{
          breakpoint: 1700,
          settings: {
            slidesToShow: 2
          }
        }, {
          breakpoint: 1100,
          settings: {
            slidesToShow: 1
          }
        }]
      })
    },
  },

  computed: {
    nextArtworkId() {
      if (!this.artwork.id) return null
      return PageQueue.getNext(this.artwork.id)
    },
    prevArtworkId() {
      if (!this.artwork.id) return null
      return PageQueue.getPrevious(this.artwork.id)
    },
    queueSourceUrl() {
      return PageQueue.sourceUrl
    },
  },

  watch: {
    '$route': function(newRoute, oldRoute) {
      jQuery('html,body').animate({ scrollTop: 0 }, 300)
      this.loadArtworkFromRoute()
    }
  },

  mounted() {

    // Fonction permettant de défiller d'un block à un autre à l'aide d'un clique
    function scrollToBlock(depart, destination) {
      jQuery(depart).on('click', function() {
        jQuery('html, body').animate({
          scrollTop: jQuery(destination).offset().top
        }, 600, 'easeInOutExpo')
      })
    }

    scrollToBlock('#btnDesc', '#desc')
    scrollToBlock('#btnBio', '#bio')
    scrollToBlock('#btnAudio', '#audio')
    scrollToBlock('#btnVideo', '#video')
    scrollToBlock('#btnPhoto', '#photo')
    scrollToBlock('#btnTech', '#tech')
    scrollToBlock('#btnStyle', '#style')
    scrollToBlock('#btnSimi', '#simi')

  }
}
</script>