<template>
  <div class="loyalty-suite-wallet__card" :class="{
    'loyalty-suite-wallet__card_no-icon': !wallet.unit_icon,
  }">
    <span class="loyalty-suite-wallet__card-icon">
      <span class="loyalty-suite-material-icons">account_balance_wallet</span>
    </span>
    <img v-if="wallet.unit_icon" :src="wallet.unit_icon" class="loyalty-suite-wallet__card-unit">
    <div class="loyalty-suite-wallet__card-balance">
      {{ formatCurrency(wallet.balance, currency, true) }} {{ wallet.units }}
    </div>
    <div class="loyalty-suite-wallet__card-actions">
      <router-link v-if="transactions" :to="`/wallet/${wallet.id}`" class="loyalty-suite-wallet__card-link">
        {{ $t('transactions') }}
      </router-link>
      <div v-if="shouldShowButton()" class="loyalty-suite-wallet__card-details" @click="openDetails()">
        {{ $t('details') }}
      </div>
    </div>
  </div>
  <WalletDetails v-model="statusDetails" :wallet="wallet" :currency="currency" @close="closeDetails" />
</template>

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

export default defineComponent({
  components: {
    WalletDetails
  },
  props: {
    wallet: {
      type: Array,
      required: true,
    },
    currency: {
      type: Array,
      required: true,
    },
    transactions: {
      type: Boolean,
      default: true,
    }
  },
  setup(props) {
    const statusDetails = ref(false);

    const closeDetails = () => {
      statusDetails.value = false;
    }

    const openDetails = (index) => {
      statusDetails.value = true;
    }

    const shouldShowButton = (index) => {
      const ignoredKeys = ['id', 'unit_icon', 'balance', 'units'];

      return Object.entries(props.wallet).some(([key, val]) => {
        if (ignoredKeys.includes(key)) return false;
        return val !== null && val !== '' && val !== 'never' && val !== false;
      });
    };

    return {
      shouldShowButton,
      openDetails,
      closeDetails,
      statusDetails,
      formatCurrency
    };
  }
});
</script>

<style lang="scss" scoped>
.loyalty-suite-wallet__card {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--loyalty-suite-light);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding-bottom: 70px;
  position: relative;

  &.loyalty-suite-wallet__card_no-icon {
    .loyalty-suite-wallet__card {
      &-balance {
        padding: 40px 20px 20px 20px;
      }
    }
  }

  &-icon {
    display: flex;
    z-index: 2;
    position: absolute;
    top: 10px;
    right: 10px;
    justify-content: center;

    .loyalty-suite-material-icons {
      color: var(--loyalty-suite-borders-60);
      font-size: 32px;
    }
  }

  &-balance {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding: 20px 20px 5px 20px;
  }

  &-unit {
    display: flex;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin-top: 25px;
  }

  &-details {
    display: flex;
    align-self: flex-start;
    font-weight: 700;
    color: var(--loyalty-suite-light);
    transition: 0.3s;
    text-transform: capitalize;
    margin-left: auto;

    &:hover {
      cursor: pointer;
      color: var(--loyalty-suite-light-90);
    }
  }

  &-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-top: auto;
    background: var(--loyalty-suite-primary);
    padding: 15px 20px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
  }

  a.loyalty-suite-wallet__card-link {
    display: flex;
    align-self: flex-start;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    color: var(--loyalty-suite-light);

    &:hover {
      color: var(--loyalty-suite-light-90);
    }
  }
}
</style>
