<template>
  <div class="bg-white" v-if="getEligiblePromotion.length > 0">
    <slot name="title"></slot>
    <div v-if="getSelectedCountry.code_iso_2 === 'TW'" class="text-danger mb-4">
      {{ $t('Eshop.Order.FocPwp.AdditionalHeader.TaiwanOnly') }}
    </div>
    <div>
      <div v-if="isFOC">
        <foc-table />
      </div>
      <div v-if="isPWP">
        <pwp-table />
      </div>
    </div>
    <b-modal
      size="sm"
      hide-header
      no-close-on-backdrop
      no-close-on-esc
      class="eshop-model"
      centered
      ref="notice_welcome"
    >
      <div class="font-weight-bold">
        {{ $t('Common.Congratulation') }}
      </div>
      <div class="font-weight-bold">
        {{ getNoticeText() }}
      </div>
      <div class="font-weight-bold">
        {{ $t('Eshop.Order.FocPwp.Notice.RememberToAdd') }}
      </div>
      <template v-slot:modal-footer="{ hide }">
        <b-button variant="primary" @click="hide()" data-qa="foc-pwp-ok-btn">{{ $t('Common.Ok') }}</b-button>
      </template>
    </b-modal>
    <b-modal
      size="sm"
      hide-header
      no-close-on-backdrop
      no-close-on-esc
      class="eshop-model"
      centered
      id="notice_shopping"
    >
      <div class="font-weight-bold">
        {{ $t('Eshop.Order.FocPwp.Notice.ContinueShoppingFirstLine') }}
      </div>
      <div class="font-weight-bold">
        {{ $t('Eshop.Order.FocPwp.Notice.ContinueShoppingSecondLine') }}
      </div>
      <template v-slot:modal-footer="{ hide }">
        <b-button variant="primary" @click="hide()" data-qa="foc-pwp-proceed-btn">{{ $t('Common.Proceed') }}</b-button>
      </template>
    </b-modal>
    <b-modal
      size="sm"
      hide-header
      no-close-on-backdrop
      no-close-on-esc
      class="eshop-model"
      centered
      ref="notice_selecton"
    >
      <div class="font-weight-bold">
        {{ $t('Eshop.Order.FocPwp.Notice.SelectionInvalid') }}
      </div>
      <div class="font-weight-bold">
        {{ $t('Eshop.Order.FocPwp.Notice.PleaseChoose') }}
      </div>
      <template v-slot:modal-footer="{ hide }">
        <b-button variant="primary" @click="hide()" data-qa="foc-pwp-ok-btn">{{ $t('Common.Ok') }}</b-button>
      </template>
    </b-modal>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import FocTable from './blocks/FocTable'
import PwpTable from './blocks/PwpTable'
import { mapMasterDataId } from '@/app/_global/mixins'

export default {
  components: {
    FocTable,
    PwpTable,
  },
  data() {
    return {
      isFOC: false,
      isPWP: false,
    }
  },
  mounted() {
    // Eligibility is checked already in PreCheckoutTemplate
    if (this.$refs.notice_welcome !== undefined) {
      this.$refs.notice_welcome.show()
    }
    this.resetData()
  },
  methods: {
    ...mapActions(['logError']),
    ...mapActions('eshop', [
      'loadCart',
      'setSelectedFocItems',
      'setSelectedPwpItems',
      'setFocSelectionComplete',
      'setPwpSelectionComplete',
      'clearSelectedFocPwpItems',
      'setPwpFocSelectionComplete',
    ]),
    preCheckout(next, inlineErrorMsg = false) {
      if ((this.isFOC && !this.getFocSelectionComplete) || (this.isPWP && !this.getPwpSelectionComplete)) {
        if (inlineErrorMsg) {
          this.logError({ cartError: this.getNoticeText() })
        } else {
          this.$refs.notice_selecton.show()
        }
      } else {
        return this.setPwpFocSelectionComplete(true).then(() => {
          if (next !== undefined && typeof next === 'function') {
            this.$nextTick(() => {
              next()
            })
          } else {
            return true
          }
        })
      }
    },
    resetData() {
      this.setSelectedFocItems([])
      this.setSelectedPwpItems([])
      this.setFocSelectionComplete(false)
      this.setPwpSelectionComplete(false)
      this.clearSelectedFocPwpItems()
      this.setPwpFocSelectionComplete(false)
    },
    getNoticeText() {
      let promotions = this.getEligiblePromotion
      promotions.forEach(promotion => {
        if (promotion.promo_type_id === this.focId) {
          this.isFOC = true
        } else if (promotion.promo_type_id === this.pwpfId || promotion.promo_type_id === this.pwpnId) {
          this.isPWP = true
        }
      })
      if (this.isFOC && this.isPWP) {
        return this.$t('Eshop.Order.FocPwp.Notice.EntitledFor', { foc_pwp: this.$t('Eshop.Order.FocPwp.FOCPWP') })
      } else {
        if (this.isFOC) {
          return this.$t('Eshop.Order.FocPwp.Notice.EntitledFor', { foc_pwp: this.$t('Eshop.Order.FocPwp.FOC') })
        }
        if (this.isPWP) {
          return this.$t('Eshop.Order.FocPwp.Notice.EntitledFor', { foc_pwp: this.$t('Eshop.Order.FocPwp.PWP') })
        }
      }
    },
    title() {
      this.getNoticeText()
      if (this.isFOC && this.isPWP) {
        return this.$t('Eshop.Order.FocPwp.FOCPWP')
      } else {
        if (this.isFOC) {
          return this.$t('Eshop.Order.FocPwp.FOC')
        }
        if (this.isPWP) {
          return this.$t('Eshop.Order.FocPwp.PWP')
        }
      }
    },
  },
  computed: {
    ...mapGetters('eshop', [
      'getCartTotal',
      'getEligiblePromotion',
      'getSelectedFocItems',
      'getSelectedPwpItems',
      'getFocSelectionComplete',
      'getPwpSelectionComplete',
    ]),
    ...mapGetters(['isLoading', 'getSelectedCountry']),
    ...mapMasterDataId({
      PROMOTION_FREE_ITEM_PROMO_TYPES: {
        focId: 'PROMO_TYPE_FOC',
        pwpfId: 'PROMO_TYPE_PWPF',
        pwpnId: 'PROMO_TYPE_PWPN',
      },
    }),
  },
}
</script>
