<template>
  <div class="hotpay-countdown" :style="generateBannerStyles">
    <div class="hotpay-countdown-counter" ref="countdown">00 : {{ data.minutes }} : 00</div>
    <svg-loader src="assets/images/icon-countdown.svg" />
    <span class="hotpay-countdown-message">{{ !hasFinished ? data.content : data.contentExpired }}</span>

    <div class="hotpay-countdown-tracker" :style="generateProgress"></div>
  </div>
</template>

<style lang="scss" scoped>
  @import '../stylesheets/variables.scss';

  .hotpay-countdown {
    margin-bottom: 24px;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: rgba($color-pink, .8);
    color: #fff;
  }

  .hotpay-countdown-counter {
    font-size: 35px;
	  font-weight: 800;
  }

  .svg-image {
    margin: 0 24px;
  }

  .hotpay-countdown-message {
    max-width: 250px;
  }

  .hotpay-countdown-tracker {
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: $color-scarlet;
    transition: 1s linear;
  }
</style>

<script>
  import shader from 'shader'
  import parse from 'color-parse'
  import HotpaySvgLoader from '../HotpaySvgLoader/HotpaySvgLoader'

  const colorAlpha = (color, value) => {
    const obj = parse(color)
    const values = obj.values

    if (!value) {
      value = obj.alpha
    }

    if (obj.space[0] === 'h') {
      const [r, g, b] = values

      return obj.space + `a(${r},${g}%,${b}%,${value})`
    }

    return obj.space + `a(${values},${value})`
  }

  export default {
    name: 'hotpay-countdown',
    components: {
      HotpaySvgLoader
    },
    props: {
      data: Object
    },
    data: () => ({
      progress: 0,
      hasFinished: false,
      countdownInterval: null,
      timerInterval: null
    }),
    computed: {
      generateBannerStyles () {
        return {
          background: colorAlpha(this.data.background, 0.8),
          color: this.data.fontColor
        }
      },
      generateProgress () {
        return {
          width: this.progress,
          'background-color': shader(this.data.background, -0.4)
        }
      }
    },
    watch: {
      data () {
        this.clearCountdownAndProgress()
        this.createCountdownAndProgress()
      }
    },
    methods: {
      getTimeRemaining (endtime) {
        const total = +endtime - Date.now()
        const seconds = Math.floor((total / 1000) % 60)
        const minutes = Math.floor((total / 1000 / 60) % 60)
        const hours = Math.floor((total / (1000 * 60 * 60)) % 24)

        return {
          total,
          hours,
          minutes,
          seconds
        }
      },
      initCountdown (endtime) {
        const updateClock = () => {
          const total = this.getTimeRemaining(endtime)
          const hours = ('0' + total.hours).slice(-2)
          const minutes = ('0' + total.minutes).slice(-2)
          const seconds = ('0' + total.seconds).slice(-2)

          if (total.total <= 0) {
            this.hasFinished = true
            window.clearInterval(this.countdownInterval)

            return false
          }

          this.$refs.countdown.innerHTML = `${hours} : ${minutes} : ${seconds}`
        }

        updateClock()
        this.countdownInterval = window.setInterval(updateClock, 1000)
      },
      calculateProgress () {
        const seconds = this.data.minutes * 60 - 2
        let counter = 0

        this.progressInterval = window.setInterval(() => {
          if (counter >= seconds) {
            window.clearInterval(this.progressInterval)
          }

          this.progress = 100 * ++counter / seconds + '%'
        }, 1000)
      },
      createCountdownAndProgress () {
        this.calculateProgress()
        this.initCountdown(new Date(Date.now() + this.data.minutes * 60 * 1000))
      },
      clearCountdownAndProgress () {
        window.clearInterval(this.countdownInterval)
        window.clearInterval(this.progressInterval)
      }
    },
    mounted () {
      this.createCountdownAndProgress()
    },
    beforeDestroy () {
      this.clearCountdownAndProgress()
    }
  }
</script>
