<template>
  <teleport to="body">
    <transition name="loyalty-suite-fade">
      <div v-if="isOpen" class="loyalty-suite-wallets-modal-wrapper" @click.self="close">
        <div class="loyalty-suite-wallets-modal">
          <div class="loyalty-suite-wallets-modal__title">
            {{ $t('walletDetails') }}
          </div>
          <div class="loyalty-suite-wallets-modal__content">
            <div v-if="wallet.cashback_rate" class="loyalty-suite-wallets-modal__option">
              <div class="loyalty-suite-wallets-modal__option-label">
                <Tooltip :text="$t('unitCashbackRateHint')" position="top-left">
                  <span class="loyalty-suite-material-icons loyalty-suite-wallets-modal__hint">info_outline</span>
                </Tooltip>
                {{ $t('cashback') }}:
              </div>
              <div class="loyalty-suite-wallets-modal__option-value">
                {{ wallet.cashback_rate }}%
              </div>
            </div>
            <div v-if="wallet.is_payable && wallet.conversion_rate" class="loyalty-suite-wallets-modal__option">
              <div class="loyalty-suite-wallets-modal__option-label">
                <Tooltip :text="$t('unitConversionRateHint')" position="top-left">
                  <span class="loyalty-suite-material-icons loyalty-suite-wallets-modal__hint">info_outline</span>
                </Tooltip>
                {{ $t('conversionRate') }}:
              </div>
              <div class="loyalty-suite-wallets-modal__option-value">
                {{ formatCurrency(1, currency) }} = {{ formatCurrency(wallet.conversion_rate, currency, true) }}
                {{ getUnitLabel(wallet, wallet.conversion_rate) }}
              </div>
            </div>
            <div v-if="wallet.limit" class="loyalty-suite-wallets-modal__option">
              <div class="loyalty-suite-wallets-modal__option-label">
                <Tooltip :text="$t('unitLimitHint')" position="top-left">
                  <span class="loyalty-suite-material-icons loyalty-suite-wallets-modal__hint">info_outline</span>
                </Tooltip>
                {{ $t('limit') }}:
              </div>
              <div class="loyalty-suite-wallets-modal__option-value">
                {{ formatCurrency(wallet.limit, currency, true) }} {{ wallet.units }}
              </div>
            </div>
          </div>
          <div class="loyalty-suite-wallets-modal__actions">
            <span class="loyalty-suite-button" @click="close">{{ $t('close') }}</span>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

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

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

    const { t } = useI18n();

    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');
    });

    function getUnitLabel(wallet: any, amount = 2): string {
      return amount === 1 ? wallet.unit : wallet.units;
    }

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

<style lang="scss" scoped>
.loyalty-suite-wallets-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 rgba(0, 0, 0, 0.2);

  &-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: 5px;
    color: var(--loyalty-suite-primary);
  }

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

  &__option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 5px;

    &-label {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      margin-right: 5px;
      margin-top: 10px;
    }

    &-value {
      display: flex;
      font-size: 14px;
      line-height: normal;
      margin-top: 10px;
    }
  }

  &__hint {
    display: flex;
    margin: 0 4px 2px 0;
    color: var(--loyalty-suite-primary);
    font-size: 18px;
    line-height: normal;
  }

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