<template>
  <div class="loyalty-suite-challenge-rewards">
    <div v-if="processedMissions.length" v-for="(item, index) in missions" :key="index" :class="[
      'loyalty-suite-challenge-reward',
      'loyalty-suite-challenge-reward_' + order,
      'loyalty-suite-challenge-reward_' + item.condition.status,
      { 'loyalty-suite-challenge-reward_no-total': rewards.length === 0 },
    ]">
      <div class="loyalty-suite-challenge-reward__order">
        <span v-if="order === 'sequential'" class="loyalty-suite-challenge-reward__order-label">
          {{ item.order }}
        </span>
        <span v-else-if="order === 'any'" class="loyalty-suite-challenge-reward__order-label">
        </span>
      </div>
      <div class="loyalty-suite-challenge-reward__list">
        <div class="loyalty-suite-challenge-reward__label">
          {{ formatLabel(item) }} <span>{{ item.network ? item.network : '' }}</span>
        </div>
        <div v-if="item.reward.length" v-for="(reward, rewardIndex) in item.reward" :key="rewardIndex"
          class="loyalty-suite-challenge-reward__item">
          <span v-if="item.condition.status === 'complete'" class="loyalty-suite-challenge-reward__item-status"></span>
          <span class="loyalty-suite-challenge-reward__item-name">
            {{ formatRewardValue(reward) }} {{ $t(reward.label) }}
          </span>
          <span v-if="shouldShowRewardDetails(reward)" class="loyalty-suite-challenge-reward__item-details"
            @click="openDetails(reward)">
            <span class="loyalty-suite-material-icons">notes</span>
          </span>
        </div>
        <div v-else class="loyalty-suite-challenge-reward__empty">{{ $t('noRewardCondition') }}</div>
      </div>
    </div>
    <div v-if="rewards.length && processedMissions.length" :class="[
      'loyalty-suite-challenge-reward',
      { 'loyalty-suite-challenge-reward_complete': status === 'complete' },
      { 'loyalty-suite-challenge-reward_disabled': status !== 'complete' && disableAll },
    ]">
      <div class="loyalty-suite-challenge-reward__order">
        <span class="loyalty-suite-challenge-reward__order-label loyalty-suite-challenge-reward__order-final"></span>
      </div>
      <div class="loyalty-suite-challenge-reward__list">
        <div class="loyalty-suite-challenge-reward__label">{{ $t('challengeCompletionRewads') }}:</div>
        <div v-for="(reward, rewardIndex) in rewards" :key="rewardIndex" class="loyalty-suite-challenge-reward__item">
          <span v-if="status === 'complete'" class="loyalty-suite-challenge-reward__item-status"></span>
          <span class="loyalty-suite-challenge-reward__item-name">
            {{ formatRewardValue(reward) }} {{ $t(reward.label) }}
          </span>
          <span v-if="shouldShowRewardDetails(reward)" class="loyalty-suite-challenge-reward__item-details"
            @click="openDetails(reward)">
            <span class="loyalty-suite-material-icons">notes</span>
          </span>
        </div>
      </div>
    </div>
    <div v-else class="loyalty-suite-challenge-reward__total">
      <Reward v-for="(reward, index) in rewards" :key="reward.id || index" :reward="reward" :status="status" :disabled="disableAll" />
    </div>
    <RewardDetails v-model="statusDetails" :reward="currentReward" @close="closeDetails" />
  </div>
</template>

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

export default defineComponent({
  components: { Reward, RewardDetails },
  props: {
    missions: {
      type: Array,
      required: true,
    },
    rewards: {
      type: Array,
      required: true,
    },
    status: {
      type: String,
      required: true,
    },
    order: {
      type: String,
      required: true,
    },
    disableAll: {
      type: Boolean,
      required: true,
    },
  },
  setup(props) {
    const { t } = useI18n();
    const statusDetails = ref(false);
    const currentReward = ref('');

    const processedMissions = ref(
      props.missions.filter(mission =>
        Array.isArray(mission.reward) && mission.reward.length > 0
      )
    );

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

    const openDetails = (reward) => {
      if (!reward) return;

      currentReward.value = reward;
      statusDetails.value = true;
    }

    const formatLabel = (item: Record<string, any>): string => {
      switch (item.condition.key) {
        case 'earned_units':
          return t('earn') + ' ' + (item.condition.currency ?? '') + ' ' + t(item.condition.key);
        case 'units_spent':
          return t('spend') + ' ' + (item.condition.currency ?? '') + ' ' + t(item.condition.key);
        default:
          return t(item.condition.key);
      }
    }

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

<style lang="scss" scoped>
.loyalty-suite-challenge-rewards {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.loyalty-suite-challenge-reward {
  display: flex;
  width: 100%;
  align-items: flex-start;
  padding-bottom: 25px;
  position: relative;

  &::after {
    display: flex;
    content: '';
    position: absolute;
    left: 19.5px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--loyalty-suite-borders-60);
  }

  &:last-child {
    padding-bottom: 0;

    &::after {
      display: none;
    }
  }

  &.loyalty-suite-challenge-reward_any {
    &::after {
      background: var(--loyalty-suite-primary);
    }

    .loyalty-suite-challenge-reward__order {
      &-label {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--loyalty-suite-primary);
      }
    }
  }

  &.loyalty-suite-challenge-reward_complete {
    &::after {
      background: var(--loyalty-suite-primary);
    }

    .loyalty-suite-challenge-reward {
      &__order {
        background: var(--loyalty-suite-primary);
        border-color: var(--loyalty-suite-primary);

        &::after {
          display: flex;
          justify-content: center;
          align-items: center;
          content: '\2714';
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: var(--loyalty-suite-primary);
          color: var(--loyalty-suite-light);
          font-size: 16px;
          font-weight: 700;
          line-height: normal;
          z-index: 2;
          position: absolute;
          top: 0;
          left: 0;
          padding-bottom: 1px;
        }
      }
    }
  }

  &.loyalty-suite-challenge-reward_disabled {
    .loyalty-suite-challenge-reward {
      &__label {
        color: var(--loyalty-suite-borders);
      }

      &__item {
        border-color: var(--loyalty-suite-borders-60);

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

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

        &-status {
          background: var(--loyalty-suite-borders-60);
        }
      }

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

    &.loyalty-suite-challenge-reward_any {
      &::after {
        background: var(--loyalty-suite-borders);
      }

      .loyalty-suite-challenge-reward {
        &__order {
          &-label {
            background: var(--loyalty-suite-borders);
          }
        }
      }
    }
  }

  &.loyalty-suite-challenge-reward_in_progress {
    .loyalty-suite-challenge-reward {
      &__order {
        border-color: var(--loyalty-suite-primary);

        &-label {
          color: var(--loyalty-suite-primary);
        }
      }
    }
  }

  &.loyalty-suite-challenge-reward_no-total {
    &:nth-last-child(2) {
      &::after {
        display: none;
      }
    }
  }

  &__order {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--loyalty-suite-borders-60);
    margin-right: 20px;
    position: relative;

    &-label {
      display: flex;
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
      text-transform: capitalize;
      color: var(--loyalty-suite-borders-60);

      &.loyalty-suite-challenge-reward__order-final {
        &::after {
          display: flex;
          content: '\2714';
          color: var(--loyalty-suite-borders-60);
          font-size: 16px;
          font-weight: 700;
          line-height: normal;
          padding-bottom: 1px;
        }
      }
    }
  }

  &__list {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    margin-top: -2px;
  }

  &__item {
    display: flex;
    width: 100%;
    max-width: 270px;
    height: 36px;
    flex-shrink: 0;
    align-items: center;
    color: var(--loyalty-suite-dark);
    background: var(--loyalty-suite-light);
    padding: 5px 6px 5px 8px;
    border: 1px dashed var(--loyalty-suite-borders);
    border-radius: 7px;
    margin-bottom: 5px;

    &:nth-child(2) {
      margin-top: 4px;
    }

    &:last-child {
      margin-bottom: 0;
    }

    &-name {
      display: flex;
      width: 100%;
      font-size: 13px;
      line-height: 15px;
      margin-right: 10px;
    }

    &-details {
      display: flex;
      flex-shrink: 0;
      margin-left: auto;
      padding: 5px 6px;
      background: var(--loyalty-suite-primary);
      border-radius: 5px;
      transition: 0.3s;

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

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

    &-status {
      display: flex;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin-right: 7px;
      background: var(--loyalty-suite-positive);
      border-radius: 50%;
      padding-bottom: 1px;

      &::after {
        display: flex;
        justify-content: center;
        align-items: center;
        content: '\2714';
        width: 100%;
        height: 100%;
        color: var(--loyalty-suite-light);
        font-size: 10px;
        font-weight: 700;
        line-height: normal;
      }
    }
  }

  &__empty {
    display: flex;
  }

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

    &-title {
      display: flex;
      font-size: 14px;
      font-weight: 700;
      line-height: normal;
      margin-bottom: 8px;
    }
  }

  &__total {
    width: calc(100% + 20px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin: -5px -10px 0 -10px;
  }

  &__label {
    display: flex;
    width: 100%;
    font-weight: 700;
    line-height: normal;
    font-size: 14px;
    margin-bottom: 6px;
  }
}
</style>
