<template>
  <div class="card mb-4">
    <div class="card-header">
      <h5>{{ $t('Dashboard.Landing.Card.Profile.Title') }}</h5>
    </div>
    <div class="card-body py-4">
      <b-row class="pb-2">
        <b-col cols="2" class="text-center pt-2">
          <icon name="dashboard-person-o" class="icon-size-3 text-primary fill-medium" />
        </b-col>
        <b-col cols="10" class="text-left">
          <h6 class="text-medium mt-2 mt-lg-0">{{ $t('Dashboard.Landing.Card.Profile.MemberValidity') }}</h6>
          <h6 class="font-weight-bold mt-0" :class="getMemberValidity.status ? 'text-info' : 'text-danger'">
            {{ getMemberValidity.text }}
          </h6>
        </b-col>
      </b-row>
      <b-row class="pb-2">
        <b-col cols="2" class="text-center pt-2">
          <icon name="dashboard-clock" class="icon-size-3 text-primary fill-medium" />
        </b-col>
        <b-col cols="10" class="text-left">
          <h6 class="text-medium mt-2 mt-lg-0">{{ $t('Common.ActiveUntil') }}</h6>
          <h6 class="text-black font-weight-bold mt-0">{{ getUntilCWName() }}</h6>
        </b-col>
      </b-row>
      <b-row class="pb-2">
        <b-col cols="2" class="text-center pt-2">
          <icon name="dashboard-badge" class="icon-size-3 text-primary fill-medium" />
        </b-col>
        <b-col cols="10" class="text-left">
          <h6 class="text-medium mt-2 mt-lg-0">{{ $t('Dashboard.Landing.Card.Profile.Membership') }}</h6>
          <h6 class="text-black font-weight-bold mt-0 ">{{ getActiveInactiveStatus() }}</h6>
        </b-col>
      </b-row>
      <b-row class="pb-2">
        <b-col cols="2" class="text-center pt-2">
          <icon name="dashboard-rank" class="icon-size-3 text-primary fill-medium" />
        </b-col>
        <b-col cols="10" class="text-left">
          <h6 class="text-medium mt-2 mt-lg-0">{{ $t('Common.Terminology.EnrollmentRank') }}</h6>
          <h6 class="text-black font-weight-bold mt-0 text-uppercase">
            {{ titleCase(getMemberDetails.enrollment_rank.rank_name, ' ') }}
          </h6>
        </b-col>
      </b-row>
      <b-row class="pb-2">
        <b-col cols="2" class="text-center pt-2">
          <icon name="dashboard-effective-flag" class="icon-size-3 text-primary fill-medium" />
        </b-col>
        <b-col cols="10" class="text-left">
          <h6 class="text-medium mt-2 mt-lg-0">{{ $t('Common.Terminology.PaidAsRank') }}</h6>
          <h6 class="text-black font-weight-bold mt-0 text-capitalize">
            <span>{{ getCurrentRank }}</span>
          </h6>
        </b-col>
      </b-row>
      <b-row class="pb-2">
        <b-col cols="2" class="text-center pt-2">
          <icon name="dashboard-mountain-flag" class="icon-size-3 text-primary fill-medium" />
        </b-col>
        <b-col cols="10" class="text-left">
          <h6 class="text-medium mt-2 mt-lg-0">{{ $t('Common.HighestRank') }}</h6>
          <h6 class="text-black font-weight-bold mt-0 text-capitalize">
            {{ getHighestRank }}
          </h6>
        </b-col>
      </b-row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { mapMasterDataId } from '@/app/_global/mixins'

export default {
  name: 'ProfileSummary',
  props: {
    dashboardData: {
      type: Object,
      default: () => ({ profile_summary: '-' }),
    },
    currentRank: {
      type: Object,
    },
    highestRank: {
      type: String,
      default: '-',
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails', 'getTeamBonusRanks', 'getCwScheduleList']),
    ...mapMasterDataId({
      MEMBER_STATUS: {
        memberStatusActiveId: 'MEMBER_STATUS_ACTIVE',
      },
      MEMBER_SALE_ACTIVITIES_STATUS: {
        memberSaleActivityStatusActiveId: 'MEMBER_SALE_ACTIVITY_STATUS_ACTIVE',
      },
    }),
    getCurrentRank() {
      return (
        this.$helpers.getValue(this.currentRank, 'current.translated_level_name.content') ||
        this.$helpers.getValue(this.currentRank, 'current.level_name', '-')
      )
    },
    getHighestRank() {
      return this.highestRank || '-'
    },
    getMemberValidity() {
      let validity = this.$helpers.getValue(this.dashboardData, 'member_validity', '-').toLowerCase()
      let status = validity === 'active'
      return {
        status: status,
        text: status ? this.$t('Common.Valid') : this.titleCase(validity, ''),
      }
    },
  },
  methods: {
    titleCase(str, delimiter = ' ', useActiveInactiveParenthesis = false) {
      str = str.toLowerCase().split(delimiter)
      for (let i = 0; i < str.length; i++) {
        str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1)
        if (useActiveInactiveParenthesis && (str[i] === 'Active' || str[i] === 'Inactive')) {
          str[i] = '(' + str[i] + ')'
        }
      }
      return str.join(' ')
    },
    getUntilCWName() {
      if (this.$helpers.getValue(this.dashboardData, 'active_until')) {
        return this.dashboardData.active_until
      }
      if (this.getMemberDetails !== null) {
        let cw = this.getCwScheduleList.find(wk => wk.id === this.getMemberDetails.active_until_cw_id)
        if (typeof cw !== 'undefined') {
          return this.$t('Dashboard.Landing.Card.Profile.CW') + ' ' + cw.cw_name
        }
      }
      return '-'
    },
    getActiveInactiveStatus() {
      if (this.$helpers.getValue(this.dashboardData, 'active')) {
        return this.$t('Common.Active')
      }
      if (this.getMemberDetails !== undefined) {
        if (
          this.getMemberDetails.sale_activity_status_cw.current_cw.status.id === this.memberSaleActivityStatusActiveId
        ) {
          return this.$t('Common.Active')
        }
      }
      return this.$t('Common.Inactive')
    },
  },
}
</script>
