<template>
  <teleport to="body">
    <transition name="loyalty-suite-fade">
      <div v-if="isOpen" class="loyalty-suite-rewards-modal-wrapper" @click.self="close">
        <div class="loyalty-suite-rewards-modal">
          <div class="loyalty-suite-rewards-modal__title">
            {{ $t('rewardDetails') }}
          </div>
          <div class="loyalty-suite-rewards-modal__content">
            <div class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('id') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                {{ reward.id }}
              </div>
            </div>
            <div v-if="reward.details.orders_quota" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('ordersLimit') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                {{ reward.details.orders_quota }}
              </div>
            </div>
            <div v-if="reward.details.orders_quota" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('ordersRemaining') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                {{ reward.details.orders_remaining ?? 0 }}
              </div>
            </div>
            <div v-if="reward.details.exclude_from_sale" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('excludeFromSale') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                {{ $t(reward.details.exclude_from_sale.value) }}
              </div>
            </div>
            <div v-if="reward.details.reward_stacking" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('rewardStacking') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                {{ $t(reward.details.reward_stacking.value) }}
              </div>
            </div>
            <div v-if="reward.details.rewards_product?.length" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('appliesToProducts') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                {{reward.details.rewards_product.map(prod => prod.label).join(', ')}}
              </div>
            </div>
            <div v-if="reward.details.rewards_categories?.length" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('appliesToCategories') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value loyalty-suite-rewards-categories">
                {{reward.details.rewards_categories.map(cat => cat.label).join(', ')}}
              </div>
            </div>
            <div v-if="reward.details.rewards_brands?.length" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('appliesToBrands') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value loyalty-suite-rewards-brands">
                {{reward.details.rewards_brands.map(cat => cat.label).join(', ')}}
              </div>
            </div>
            <div v-if="reward.details.rewards_days_period" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ typeof reward.details.rewards_days_period === 'string' ? $t('expiresOn') : $t('activeFor') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                {{ typeof reward.details.rewards_days_period === 'string'
                  ? reward.details.rewards_days_period
                  : reward.details.rewards_days_period + ' ' + $t('daysAfterReceive') }}
              </div>
            </div>
            <div v-if="reward.details.rewards_calendar_date" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('expiresOn') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                {{ reward.details.rewards_calendar_date }}
              </div>
            </div>
            <div v-if="reward.key === 'rewards_units'"
              class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('forWallet') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                <router-link v-if="reward.details.wallet_id" :to="`/wallet/${reward.details.wallet_id}`"
                  class="loyalty-suite-rewards-modal__option-link">
                  {{ $t('wallet') }}
                </router-link>
              </div>
            </div>
            <div v-if="reward.key === 'rewards_rank'" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('forRank') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                <router-link v-if="reward.details.rank_id" :to="`/rank/${reward.details.rank_id}`"
                  class="loyalty-suite-rewards-modal__option-link">
                  {{ reward.rank }}
                </router-link>
              </div>
            </div>
            <div v-if="reward.key === 'rewards_achievement'" class="loyalty-suite-rewards-modal__option">
              <div class="loyalty-suite-rewards-modal__option-label">
                {{ $t('forAchievement') }}:
              </div>
              <div class="loyalty-suite-rewards-modal__option-value">
                <router-link v-if="reward.details.achievement_id" :to="`/achievement/${reward.details.achievement_id}`"
                  class="loyalty-suite-rewards-modal__option-link">
                  {{ reward.achievement }}
                </router-link>
              </div>
            </div>
            <template v-if="reward.details.coupon">
              <div v-if="reward.details.coupon.code" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('codeCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ reward.details.coupon.code }}
                </div>
              </div>
              <div v-if="reward.details.coupon.usage_limit_user > 0" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('usageLimitCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ reward.details.coupon.usage_limit_user }}
                </div>
              </div>
              <div v-if="reward.details.coupon.usage_remaining !== null && reward.details.coupon.usage_remaining !== undefined"
                class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('usageRemainingCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ reward.details.coupon.usage_remaining }}
                </div>
              </div>
              <div v-if="reward.details.coupon.usage_limit_per_item > 0" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('usageLimitPerItemCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ reward.details.coupon.usage_limit_per_item }}
                </div>
              </div>
              <div v-if="reward.details.coupon.description?.length" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('descriptionCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ reward.details.coupon.description }}
                </div>
              </div>
              <div v-if="reward.details.coupon.categories?.length" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('categoriesCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value loyalty-suite-rewards-categories">
                  {{ reward.details.coupon.categories.join(', ') }}
                </div>
              </div>
              <div v-if="reward.details.coupon.excluded_categories?.length" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('excludedCategoriesCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value loyalty-suite-rewards-categories">
                  {{ reward.details.coupon.excluded_categories.join(', ') }}
                </div>
              </div>
              <div v-if="reward.details.coupon.brands?.length" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('brandsCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value loyalty-suite-rewards-brands">
                  {{ reward.details.coupon.brands.join(', ') }}
                </div>
              </div>
              <div v-if="reward.details.coupon.excluded_brands?.length" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('excludedBrandsCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value loyalty-suite-rewards-brands">
                  {{ reward.details.coupon.excluded_brands.join(', ') }}
                </div>
              </div>
              <div v-if="reward.details.coupon.products?.length" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('productsCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ reward.details.coupon.products.join(', ') }}
                </div>
              </div>
              <div v-if="reward.details.coupon.excluded_products?.length" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('excludedProductsCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ reward.details.coupon.excluded_products.join(', ') }}
                </div>
              </div>
              <div v-if="reward.details.coupon.date_expires" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('dateExpiresCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ reward.details.coupon.date_expires }}
                </div>
              </div>
              <div v-if="reward.details.coupon.maximum_amount" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('maximumAmountCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ formatCurrency(Number(reward.details.coupon.maximum_amount), reward.details.coupon.main_currency)
                  }}
                </div>
              </div>
              <div v-if="reward.details.coupon.minimum_amount" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('minimumAmountCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ formatCurrency(Number(reward.details.coupon.minimum_amount), reward.details.coupon.main_currency)
                  }}
                </div>
              </div>
              <div v-if="reward.details.coupon.free_shipping" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('freeShippingCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ $t('yesReward') }}
                </div>
              </div>
              <div v-if="reward.details.coupon.individual_use" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('individualUseCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ $t('yesReward') }}
                </div>
              </div>
              <div v-if="reward.details.coupon.exclude_sale_items" class="loyalty-suite-rewards-modal__option">
                <div class="loyalty-suite-rewards-modal__option-label">
                  {{ $t('excludeSaleItemsCoupon') }}:
                </div>
                <div class="loyalty-suite-rewards-modal__option-value">
                  {{ $t('yesReward') }}
                </div>
              </div>
            </template>
          </div>
          <div class="loyalty-suite-rewards-modal__actions">
            <span class="loyalty-suite-button" @click="close">{{ $t('close') }}</span>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, onUnmounted, watch, computed } from 'vue';
import { formatCurrency } from '../utils/formatters';

export default defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      required: true,
    },
    reward: {
      type: Object,
      required: true,
    }
  },
  emits: ['update:modelValue', 'close'],
  setup(props, { emit }) {
    const isOpen = computed({
      get: () => props.modelValue,
      set: (val: boolean) => emit('update:modelValue', val),
    });

    const close = () => {
      emit('update:modelValue', false);
      emit('close');
    };

    watch(isOpen, (val) => {
      if (val) {
        document.body.classList.add('loyalty-suite-no-scroll');
      } else {
        document.body.classList.remove('loyalty-suite-no-scroll');
      }
    });

    onUnmounted(() => {
      document.body.classList.remove('loyalty-suite-no-scroll');
    });

    return {
      isOpen,
      close,
      formatCurrency
    };
  }
});
</script>

<style lang="scss" scoped>
.loyalty-suite-rewards-modal {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
  min-width: 350px;
  max-width: 576px;
  max-height: calc(100vh - 48px);
  border-radius: 8px;
  background: var(--loyalty-suite-light);
  box-shadow: 0 5px 15px 0 var(--loyalty-suite-borders-40);

  &-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__title {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    color: var(--loyalty-suite-primary);
  }

  &__content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  &__option {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    &-label {
      display: flex;
      font-size: 14px;
      font-weight: 700;
      line-height: normal;
      margin-right: 5px;
      margin-bottom: 6px;
    }

    &-value {
      display: flex;
      font-size: 14px;
      line-height: normal;
      margin-bottom: 6px;

      &.loyalty-suite-rewards-brands,
      &.loyalty-suite-rewards-categories {
        text-transform: capitalize;
      }
    }

    a.loyalty-suite-rewards-modal__option-link {
      display: flex;
      font-size: 14px;
      line-height: normal;
      color: var(--loyalty-suite-primary);
      text-decoration: none;
      text-transform: capitalize;
    }
  }

  &__actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .loyalty-suite-rewards-modal {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}
</style>
