<template>
  <div :class="card.container" :style="translateCard">
    <img :src="artistData.img.backgroundSrc" :class="card.background">
    <div :class="card.gradient" :style="gradientBackground"></div>
    <img :src="artistData.img.artistSrc" :alt="artistData.img.alt" :class="card.artist">
  </div>
</template>

<script>
  let INITIAL_TRANSLATE_Y = null
  let FINAL_TRANSLATE_Y = null
  const INITIAL_ROTATE_Z = 0.2
  const FINAL_ROTATE_Z = 0.5
  const INITIAL_ROTATE_A = -25
  const FINAL_ROTATE_A = 25
  const INITIAL_GRADIENT = 0.1
  const FINAL_GRADIENT = 1.3
  const INITIAL_GRADIENT_A = 90
  const FINAL_GRADIENT_A = 45
  export default {
    name: 'artist-card',
    props: {
      artistData: Object,
      scrollY: Number
    },
    data: () => {
      return {
        translateCard: {
          transform: `translate3d(0, -100px, 0) rotate3d(0, 1, 0, -25deg)`
        },
        gradientBackground: {
          background: `linear-gradient(90deg, rgba(104, 107, 104, 0.1), rgba(0, 0, 0, 0.1))`
        }
      }
    },
    methods: {
      handleResize () {
        const bounds = this.$el.getBoundingClientRect()
        this.bounds = {
          top: bounds.top + (window.scrollY || window.pageYOffset),
          height: bounds.height
        }
        this.viewport = {
          height: window.innerHeight,
          width: window.innerWidth
        }
      }
    },
    created () {
      window.addEventListener('resize', this.handleResize)
    },
    mounted () {
      setTimeout(() => {
        this.handleResize()
      }, 100)
    },
    watch: {
      scrollY: function (val) {
        // only animate topY over 75% of vh
        const topY = this.bounds.top - (this.viewport.height * 0.75)
        const bottomY = this.bounds.top + this.bounds.height

        // Change translateY depending on breakpoint
        if (this.viewport.width > 768) {
          INITIAL_TRANSLATE_Y = 70
          FINAL_TRANSLATE_Y = -140
        } else {
          INITIAL_TRANSLATE_Y = 30
          FINAL_TRANSLATE_Y = -30
        }
        // Determine percentage animation
        let pctPlay = 0
        if (this.scrollY >= topY && this.scrollY < bottomY) {
          const deltaY = this.scrollY - topY
          pctPlay = deltaY * 100 / (bottomY - topY)
        }
        if (this.scrollY > bottomY) {
          pctPlay = 100
        }
        // calculate translation Y
        let translateY = INITIAL_TRANSLATE_Y
        if (pctPlay > 0) {
          translateY = ((FINAL_TRANSLATE_Y - INITIAL_TRANSLATE_Y) * pctPlay / 100) + INITIAL_TRANSLATE_Y
        }

        // calculate rotation Z
        let rotateZ = INITIAL_ROTATE_Z
        if (pctPlay > 0) {
          rotateZ = ((FINAL_ROTATE_Z - INITIAL_ROTATE_Z) * pctPlay / 100) + INITIAL_ROTATE_Z
        }

        // calculate rotation angle
        let rotateA = INITIAL_ROTATE_A
        if (pctPlay > 0) {
          rotateA = ((FINAL_ROTATE_A - INITIAL_ROTATE_A) * pctPlay / 100) + INITIAL_ROTATE_A
        }

        // calculate gradient value
        let gradient = INITIAL_GRADIENT
        if (pctPlay > 0) {
          gradient = ((FINAL_GRADIENT - INITIAL_GRADIENT) * pctPlay / 100) + INITIAL_GRADIENT
        }

        // caluclate gradient angle
        let gradientA = INITIAL_GRADIENT_A
        if (pctPlay > 0) {
          gradientA = ((FINAL_GRADIENT_A - INITIAL_GRADIENT_A) * pctPlay / 100) + INITIAL_GRADIENT_A
        }

        //
        this.translateCard.transform = `translate3d(0, ${translateY}px, 0) rotate3d(0, 1, ${rotateZ}, ${rotateA}deg)`
        this.gradientBackground.background = `linear-gradient(${gradientA}deg, rgba(104, 107, 104, 0.1), rgba(0, 0, 0, ${gradient}))`
      }
    }
  }
</script>

<style module="card" src="./artist-card.css"></style>