<template>
  <div class="lottery">
    <div
      v-if="!lotteryPopUpBtn || lotteryPopUpBtn.visible"
      class="lottery-popup-button"
      :style="[buttonStyle, { transform: btnScale }]"
      @click="showPopup"
    ></div>

    <div class="lottery-popup">
      <div class="relatevePos">
        <div class="bg" @click="closePopup"></div>
        <div class="content" :style="[popUpStyle]">
          <div class="relativePos">
            <i class="closeBtn far fa-times-circle" @click="closePopup"></i>
            <div class="btnBox" @click="closePopup">
              <nuxt-link
                v-if="lastLottery && lastLottery.expired"
                :to="{ name: 'lottery', query: { mode: 'result' } }"
                class="btn btn-primary"
                >مشاهده نتایج قرعه کشی</nuxt-link
              >
              <nuxt-link v-else :to="{ name: 'lottery', query: { mode: 'enroll' } }" class="btn btn-primary"
                >شرکت در قرعه کشی</nuxt-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LotteryPopUp',
  data() {
    return {
      lotteryPopUpBtn: null,
      lastLottery: null,
      btnScale: 'scale(0)',
      isPopupOpen: false
    }
  },
  computed: {
    buttonStyle() {
      const btn = this.lotteryPopUpBtn
      const data = {
        bottom: btn?.y.toString().concat('px') || 0,
        left: btn?.x.toString().concat('px') || 0,
        width: btn?.w.toString().concat('px') || 0,
        height: btn?.h.toString().concat('px') || 0
      }
      if (btn) data.backgroundImage = `url(${btn?.bgImg})`
      return data
    },
    popUpStyle() {
      const popup = this.lastLottery
      const data = {}

      if (popup) {
        if (!popup.expired) {
          data.backgroundImage = `url(${popup?.entryBgImg})`
          data.width = popup.entryWidth.toString().concat('px')
          data.height = popup.entryHeight.toString().concat('px')
        } else {
          data.backgroundImage = `url(${popup?.resultBgImg})`
          data.width = popup.resultWidth.toString().concat('px')
          data.height = popup.resultHeight.toString().concat('px')
        }
      }

      return data
    }
  },
  watch: {
    buttonStyle(neVal, oldVal) {
      setTimeout(() => (this.btnScale = 'scale(1)'), 1 * 1000)
    }
  },
  async mounted() {
    // attach esc key to window
    $(document).keyup(e => {
      if (e.key === 'Escape' && this.isPopupOpen) this.closePopup()
    })

    // fetch data
    try {
      const lotteryPopUpBtn = await this.$axios.get('/api/public/lotteryPopUp')
      if (lotteryPopUpBtn.data.visible) {
        const lastLottery = await this.$axios.get('/api/public/lastLottery')
        this.lastLottery = lastLottery.data
      }
      setTimeout(() => (this.lotteryPopUpBtn = lotteryPopUpBtn.data), 2 * 1000)
    } catch (e) {
      console.log('LotteryPopUp button fetch problem ---- ', e.response.data)
    }
  },
  methods: {
    showPopup() {
      this.$gsap
        .timeline({
          onComplete: () => (this.isPopupOpen = true)
        })
        .to($('.lottery-popup'), { autoAlpha: 1, duration: 0.04 })
        .to($('.lottery-popup .content'), { opacity: 1, scale: 1, duration: 0.2, ease: 'power3.out' })
    },
    closePopup() {
      this.$gsap
        .timeline({
          onComplete: () => (this.isPopupOpen = false)
        })
        .to($('.lottery-popup .content'), { opacity: 0, scale: 0, duration: 0.1 })
        .to($('.lottery-popup'), { autoAlpha: 0, duration: 0.04 })
    }
  }
}
</script>
