<template>
  <div class="loyalty-suite-reward__card" :class="{
    [`loyalty-suite-reward__card_${style}`]: true,
    [`loyalty-suite-reward__card_disabled`]: disabled,
    'loyalty-suite-reward__card_slide': inSlider
  }">
    <div class="loyalty-suite-reward__card-content">
      <div class="loyalty-suite-reward__card-wrapper">
        <div class="loyalty-suite-reward__card-icon">
          <span class="loyalty-suite-material-icons">{{ reward.icon }}</span>
        </div>
        <div class="loyalty-suite-reward__card-name">
          {{ formatRewardValue(reward) }} {{ $t(reward.label) }}
        </div>
        <span v-if="reward.status" :class="[
          'loyalty-suite-reward__card-status',
          'loyalty-suite-reward__card-status_' + reward.status
        ]">
          {{ $t(getDisplayStatus(reward)) }}
        </span>
        <span v-if="status === 'complete'" :class="[
          'loyalty-suite-reward__card-status',
          'loyalty-suite-reward__card-status_' + status
        ]">
          {{ $t('received') }}
        </span>
        <div v-if="shouldShowRewardDetails(reward)" class="loyalty-suite-reward__card-details" @click="openDetails()">
          {{ $t('details') }}
        </div>
      </div>
    </div>
  </div>
  <RewardDetails v-model="statusDetails" :reward="currentReward" @close="closeDetails" />
</template>

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

export default defineComponent({
  components: {
    RewardDetails
  },
  props: {
    reward: {
      type: Array,
      required: true,
    },
    status: {
      type: String,
      required: false,
    },
    inSlider: {
      type: Boolean,
      default: false,
    },
    style: {
      type: String,
      default: 'classic'
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  setup(props) {
    const statusDetails = ref(false);
    const currentReward = ref('');

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

    const openDetails = () => {
      currentReward.value = props.reward;
      statusDetails.value = true;
    }

    const getDisplayStatus = (reward: any): string => {
      const rewardType = reward?.key || '';
      const showAsReceived = ['rewards_rank', 'rewards_achievement', 'rewards_units'].includes(rewardType);
      return reward.status === 'active' && showAsReceived ? 'received' : reward.status;
    };

    return {
      statusDetails,
      openDetails,
      closeDetails,
      currentReward,
      shouldShowRewardDetails,
      getDisplayStatus,
      formatRewardValue
    }
  }
});
</script>

<style lang="scss" scoped>
.loyalty-suite-reward__card {
  display: flex;
  padding: 10px;

  &.loyalty-suite-reward__card_slide {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  &.loyalty-suite-reward__card_classic {
    .loyalty-suite-reward__card {
      &-content {
        display: flex;
        width: 100%;
        min-height: 170px;
        background: var(--loyalty-suite-light);
        position: relative;
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
        border-radius: 8px;
      }

      &-name {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        line-height: normal;
        padding: 15px 20px;
      }

      &-wrapper {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 8px;
      }

      &-icon {
        display: flex;
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        padding-top: 2px;
        background: var(--loyalty-suite-primary);
        border-radius: 50%;
        margin-top: 20px;

        .loyalty-suite-material-icons {
          font-size: 26px;
          color: var(--loyalty-suite-light);
        }
      }

      &-status {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 8px 6px;
        color: var(--loyalty-suite-light);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        border-radius: 4px;
        position: absolute;
        z-index: 2;
        top: 7px;
        left: 7px;

        &.loyalty-suite-reward__card-status_used {
          background: var(--loyalty-suite-negative);
        }

        &.loyalty-suite-reward__card-status_expired {
          background: var(--loyalty-suite-negative);
        }

        &.loyalty-suite-reward__card-status_active {
          background: var(--loyalty-suite-positive);
        }

        &.loyalty-suite-reward__card-status_complete {
          background: var(--loyalty-suite-positive);
        }
      }

      &-details {
        display: flex;
        font-size: 14px;
        font-weight: 700;
        color: var(--loyalty-suite-primary);
        transition: 0.3s;
        text-transform: capitalize;
        margin-bottom: 20px;

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

  &.loyalty-suite-reward__card_disabled {
    &.loyalty-suite-reward__card_classic {
      .loyalty-suite-reward__card {
        &-icon {
          background: var(--loyalty-suite-borders);
        }

        &-name {
          color: var(--loyalty-suite-borders-60);
        }

        &-details {
          pointer-events: none;
          opacity: 0.5;
        }

        &-status {
          opacity: 0.5;
        }
      }
    }
  }
}
</style>
