<template lang="pug">
.landing(data-scroll-container)
  section(data-scroll-section)
    .wrapper(data-scroll)
</template>

<script>
import { each } from 'lodash'
import { gsap } from 'gsap'
import { mapGetters, mapActions } from 'vuex'
import PageMixin from '@/mixins/PageMixin.js'

export default {
  mixins: [PageMixin],
  data: () => ({
    name: 'homepage'
  }),
  computed: {
    ...mapGetters(['scrollToTarget', 'scrollEvent'])
  },
  watch: {
    scrollEvent() {
      this.scroll &&
        this.scrollToTarget !== '' &&
        this.scroll.scrollTo(this.scrollToTarget)
    }
  },
  mounted() {
    this.element = this.$el

    this.$nextTick(() => {
      setTimeout(() => this.createScroll(), 300)
    })
  },
  methods: {
    ...mapActions(['setTarget']),
    createScroll() {
      // eslint-disable-next-line new-cap
      this.scroll = new this.locomotiveScroll({
        el: this.element,
        scrollbarClass: 'scrollbar',
        getDirection: true,
        getPosition: true,
        smooth: true
      })

      this.scroll.on('scroll', (instance) => {
        instance.scroll.y > 30
          ? document.documentElement.classList.add('is-scrolled')
          : document.documentElement.classList.remove('is-scrolled')
        instance.scroll.y > 100 &&
          document.documentElement.setAttribute(
            'data-direction',
            instance.direction
          )
      })

      this.scroll.on('call', (id) => {
        if (this.animations[id]) {
          this.animations[id].animateIn()
        }
      })
    },
    createAnimations() {
      this.animations = {}

      each(
        [
          this.elements.title,
          ...this.elements.biography,
          ...this.elements.subtitles,
          ...this.elements.links,
          this.elements.credits
        ],
        (element, index) => {
          this.animations[`animation_${index}`] = new Text({
            append: true,
            element
          })

          const percent = '15%'

          element.setAttribute('data-scroll', '')
          element.setAttribute('data-scroll-call', `animation_${index}`)
          element.setAttribute('data-scroll-offset', percent)
        }
      )
    }
  },
  transition: {
    mode: 'out-in',
    css: false,
    beforeEnter(el, done) {
      // eslint-disable-next-line new-cap
      this.timelineIn = new gsap.timeline()

      this.timelineIn.to(el, 5, {
        autoAlpha: 1,
        onComplete: done
      })
    },
    leave(el, done) {
      // eslint-disable-next-line new-cap
      this.timelineOut = new gsap.timeline()

      this.timelineOut.to(el, 0.5, {
        autoAlpha: 0
      })
    }
  }
}
</script>

<style lang="scss">
.landing {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 90px;
  box-sizing: border-box;
  width: 85vw;
  margin: 0 auto;
}

.animation {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  &.is-inview {
    transition-delay: 0.51s;
    opacity: 1;
    transform: none;
  }
}

.container {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  //width: 55%;
  padding-bottom: 40px;
  box-sizing: border-box;
}

@media screen and (min-width: 800px) {
  .wrapper {
    max-width: 1230px;
  }
}

@media screen and (min-width: 1400px) {
  .wrapper {
    max-width: 1230px;
  }
}
</style>
