<template>
  <div>
    <b-row>
      <b-col cols="auto">
        <b-form-group label-for="PayCycle" :label="$t('Common.Terminology.PayCycle')" label-cols="auto">
          <b-form-select
            id="PayCycle"
            :value="selectedPayCycle"
            :options="payCycleOptions"
            @change="loadMemberDashBoardDetail"
          />
        </b-form-group>
      </b-col>
    </b-row>

    <b-row>
      <b-col cols="12" xl="4" class="order-xl-3">
        <b-row class="h-100">
          <b-col
            v-for="(element, idx) in overviewElements"
            cols="6"
            lg="3"
            xl="6"
            :key="idx"
            class="mb-4"
            :class="element.containerClass"
          >
            <b-card class="text-center h-100 lifted" :style="element.backgroundStyle">
              <router-link v-if="element.to" :to="element.to" class="stretched-link" />

              <b-row>
                <b-col cols="12" class="mb-2">
                  <b-img
                    fluid
                    :src="element.icon"
                    class="icon-size-5 icon-size-lg-6 icon-size-xl-7 object-fit-contain"
                  />
                </b-col>

                <b-col cols="12" class="text-capitalize">
                  <div class="small">{{ element.descriptionText }}</div>
                  <div class="font-weight-bold" :style="element.titleStyle" :class="element.titleClass">
                    {{ element.title }}
                  </div>
                </b-col>
              </b-row>
            </b-card>
          </b-col>
        </b-row>
      </b-col>

      <b-col cols="12" md="6" xl="4" class="order-xl-1 mb-4">
        <custom-card-template
          :bold-title="false"
          :card-data="getBVSvInfo"
          class="text-capitalize h-100"
          data-qa-prefix="dashboard-evoDashboard-svBvInfo"
        />
      </b-col>

      <b-col cols="12" md="6" xl="4" class="order-xl-2 mb-4">
        <custom-card-template
          :bold-title="false"
          class="text-capitalize h-100"
          :card-data="getLatestQualification"
          data-qa-prefix="dashboard-evoDashboard-latestQualification"
        >
          <template v-slot:councilRankValue="col">
            <span class="pr-1">{{ col.value.text }}</span>
            <template v-if="col.value.tooltips">
              <icon id="council-rank-info" name="info-circle-icon" class="text-primary c-pointer" />
              <b-tooltip variant="primary" placement="right" target="council-rank-info" :title="col.value.tooltips" />
            </template>
          </template>
        </custom-card-template>
      </b-col>
    </b-row>

    <b-row>
      <b-col xl="5" class="col-xxl-4 mb-4">
        <custom-card-template
          :bold-title="false"
          :card-data="getCarHouseFund"
          class="text-capitalize h-100"
          data-qa-prefix="dashboard-evoDashboard-carHouseFund"
        >
          <template v-slot:body="row">
            <b-row v-for="(rowData, index) in row.context" :key="index" class="border-bottom my-3 mx-0 pb-3">
              <b-col cols="4">
                <span class="pr-1">{{ rowData[0].text }}</span>
                <template v-if="rowData[0].popup">
                  <icon :id="`car-house-info-${index}`" name="info-circle-icon" class="text-primary c-pointer" />
                  <b-popover :target="`car-house-info-${index}`" triggers="hover focus">
                    <template v-slot:title>
                      <span class="text-capitalize">
                        {{ rowData[0].text }}
                      </span>
                    </template>
                    <ul class="pl-4">
                      <li v-for="(info, idx) in rowData[0].popup" :key="idx">{{ info }}</li>
                    </ul>
                  </b-popover>
                </template>
              </b-col>

              <b-col cols="8">
                <div v-for="(rowInfo, idx) in rowData[1].row" :key="idx" class="mb-1">
                  <div>{{ rowInfo.text }}</div>
                  <div class="font-weight-bold">{{ rowInfo.value }}</div>
                </div>
              </b-col>
            </b-row>
          </template>
        </custom-card-template>
      </b-col>

      <b-col xl="7" class="col-xxl-8 mb-4">
        <custom-card-template
          :bold-title="false"
          :card-data="getBonuses"
          class="text-capitalize shadow-sm"
          data-qa-prefix="dashboard-evoDashboard-bonuses"
        >
          <template v-slot="data">
            <b-row class="mt-3">
              <b-col v-for="(section, index) in data.context" cols="12" lg="6" xl="12" class="col-xxl-6" :key="index">
                <b-row v-for="(rowData, rowIdx) in section.items" :key="rowIdx" class="border-bottom mb-3 mx-0 pb-3">
                  <b-col v-for="(colData, colIdx) in rowData" cols="6" :key="colIdx">
                    <span :class="colData.class">{{ colData.text }}</span>
                  </b-col>
                </b-row>
              </b-col>
            </b-row>
          </template>
        </custom-card-template>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { getValue } from '@/helpers/variable-handling'
import EshopIcon from '@/assets/img/Evo/dashboard-eshop-icon.svg'
import ActiveSvIcon from '@/assets/img/Evo/dashboard-active-sv-icon.svg'
import EnrolmentIcon from '@/assets/img/Evo/dashboard-enrolment-icon.svg'
import ReportIcon from '@/assets/img/Evo/dashboard-latest-statement-icon.svg'
import CustomCardTemplate from '@/elements/common/components/CustomCardTemplate'
import { mapActions } from 'vuex'

export default {
  name: 'EvoDashboard',
  props: {
    enrolmentSponsorId: { type: [Number, String], default: null },
    dashboardDetails: { type: Object, default: () => ({}) },
  },
  components: { CustomCardTemplate },
  data() {
    return {
      payCycleOptions: [],
      selectedPayCycle: null,
      valueClass: ['font-weight-bold'],
      componentMetaData: new Map([
        ['bonuses', { title: this.$t('Dashboard.Landing.Bonuses'), icon: 'dashboard-bonuses', themeColor: '#79be00' }],
        [
          'bv_sv_info',
          {
            themeColor: '#0092df',
            icon: 'dashboard-bv-sv-info',
            title: this.$t('Report.BvSvInfo.Title'),
            link: { name: 'ReportBvSvInfoStatement' },
          },
        ],
        [
          'car_house_fund',
          { title: this.$t('Dashboard.Landing.CarHouseFund'), icon: 'dashboard-car-house-fund', themeColor: '#006fa9' },
        ],
        [
          'latest_qualification',
          {
            title: this.$t('Dashboard.Landing.LatestQualification'),
            icon: 'dashboard-latest-qualification',
            themeColor: '#00beb8',
          },
        ],
      ]),
      payCycleFilter: { filter_type: 'current', sort: 'id', limit: 2 },
    }
  },
  computed: {
    getBVSvInfo() {
      let { themeColor, icon, link, title: text } = this.componentMetaData.get('bv_sv_info')

      return {
        title: {
          icon,
          text,
          iconClass: ['icon-size-3'],
          iconStyle: { color: themeColor },
          containerStyle: { 'border-bottom': `2px solid ${themeColor}` },
          link: this.$security.policy.can('bv-sv-info-statement', 'view') && link,
        },
        context: {
          data: [
            {
              items: [
                ...getValue(this.dashboardDetails, 'bv_sv_info.cbp_point', []).map(cbp => [
                  { text: `${this.$t('Common.Terminology.Cbp')} ${cbp.country.code_iso_2}` },
                  { text: cbp.points || '0.0000', class: this.valueClass },
                ]),
                [
                  {
                    text: `${this.$t('Common.Terminology.PersonalSales.Short')} / ${this.$t('Common.Terminology.Bv')}`,
                  },
                  {
                    text: getValue(this.dashboardDetails, 'bv_sv_info.personal_sales.sales', 0),
                    class: this.valueClass,
                  },
                  {
                    text: getValue(this.dashboardDetails, 'bv_sv_info.personal_sales.bv', '0.00'),
                    class: this.valueClass,
                  },
                ],
                [
                  {
                    text: `${this.$t('Common.Terminology.PersonalGroupSales.Short')} / ${this.$t(
                      'Common.Terminology.Bv'
                    )}`,
                  },
                  {
                    text: getValue(this.dashboardDetails, 'bv_sv_info.personal_group_sales.sales', 0),
                    class: this.valueClass,
                  },
                  {
                    text: getValue(this.dashboardDetails, 'bv_sv_info.personal_group_sales.bv', '0.00'),
                    class: this.valueClass,
                  },
                ],
                [
                  {
                    text: `${this.$t('Common.Terminology.TeamGroupSales.Short')} / ${this.$t('Common.Terminology.Bv')}`,
                  },
                  {
                    text: getValue(this.dashboardDetails, 'bv_sv_info.team_group_sales.sales', 0),
                    class: this.valueClass,
                  },
                  {
                    text: getValue(this.dashboardDetails, 'bv_sv_info.team_group_sales.bv', '0.00'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.BvSvInfo.QualifiedManagerLineNo') },
                  {
                    text: getValue(this.dashboardDetails, 'bv_sv_info.qualified_manager_line_no', 0),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.BvSvInfo.GemQualifiedManagerLineNo') },
                  {
                    text: getValue(this.dashboardDetails, 'bv_sv_info.gems_qualified_manager_line_no', 0),
                    class: this.valueClass,
                  },
                ],
              ],
              class: ['border-bottom', 'pb-3'],
            },
          ],
        },
      }
    },

    getLatestQualification() {
      let { themeColor, icon, title: text } = this.componentMetaData.get('latest_qualification')

      return {
        title: {
          icon,
          text,
          iconClass: ['icon-size-4'],
          iconStyle: { color: themeColor },
          containerStyle: { 'border-bottom': `2px solid ${themeColor}` },
        },
        context: {
          data: [
            {
              items: [
                [
                  { text: this.$t('Common.Terminology.CouncilRank') },
                  {
                    slotName: 'councilRankValue',
                    text: getValue(this.dashboardDetails, 'latest_qualification.council_rank_code', '-'),
                    tooltips: getValue(this.dashboardDetails, 'latest_qualification.council_rank_name'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Common.Rank') },
                  {
                    text: getValue(this.dashboardDetails, 'latest_qualification.team_current_rank', '-'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.LatestQualification.NextRank') },
                  {
                    text: getValue(this.dashboardDetails, 'latest_qualification.team_next_rank_name', '-'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.LatestQualification.PSToTopUp') },
                  {
                    text: getValue(this.dashboardDetails, 'latest_qualification.personal_sales_to_top_up', '-'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.LatestQualification.PGSToTopUp') },
                  {
                    text: getValue(this.dashboardDetails, 'latest_qualification.personal_group_sales_to_top_up', '-'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.LatestQualification.QualifyManagerToBuild') },
                  {
                    text: getValue(this.dashboardDetails, 'latest_qualification.qualified_manager_line_to_build', '-'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.LatestQualification.QualifyLeadershipLinesToBuild') },
                  {
                    text: getValue(
                      this.dashboardDetails,
                      'latest_qualification.qualified_leadership_line_to_build',
                      '-'
                    ),
                    class: this.valueClass,
                  },
                ],
              ],
              class: ['border-bottom', 'pb-3'],
            },
          ],
        },
      }
    },

    getCarHouseFund() {
      let { themeColor, icon, title: text } = this.componentMetaData.get('car_house_fund')

      return {
        title: {
          icon,
          text,
          iconClass: ['icon-size-2'],
          iconStyle: { color: themeColor },
          containerStyle: { 'border-bottom': `2px solid ${themeColor}` },
        },
        context: {
          data: [
            {
              items: [
                [
                  {
                    text: this.$t('Dashboard.Landing.CarHouseFund.HouseFund'),
                    popup: getValue(this.dashboardDetails, 'house_fund.info'),
                  },
                  {
                    row: [
                      {
                        text: this.$t('Dashboard.Landing.CarHouseFund.Qualify'),
                        value: getValue(this.dashboardDetails, 'house_fund.cw.cw_name') || '-',
                      },
                      {
                        text: this.$t('Dashboard.Landing.CarHouseFund.ReQualifySvMonth'),
                        value: getValue(this.dashboardDetails, 'house_fund.re_qualifying_text') || '-',
                      },
                    ],
                  },
                ],
                [
                  {
                    text: this.$t('Dashboard.Landing.CarHouseFund.CarFund'),
                    popup: getValue(this.dashboardDetails, 'car_fund.info'),
                  },
                  {
                    row: [
                      {
                        text: this.$t('Dashboard.Landing.CarHouseFund.Qualify'),
                        value: getValue(this.dashboardDetails, 'car_fund.cw.cw_name') || '-',
                      },
                      {
                        text: this.$t('Dashboard.Landing.CarHouseFund.ReQualifySvMonth'),
                        value: getValue(this.dashboardDetails, 'car_fund.re_qualifying_text') || '-',
                      },
                    ],
                  },
                ],
              ],
              class: ['border-bottom', 'pb-3'],
            },
          ],
        },
      }
    },

    getBonuses() {
      let { themeColor, icon, title: text } = this.componentMetaData.get('bonuses')

      return {
        title: {
          text,
          icon,
          iconClass: ['icon-size-3'],
          iconStyle: { color: themeColor },
          containerStyle: { 'border-bottom': `2px solid ${themeColor}` },
        },
        context: {
          data: [
            {
              items: [
                [
                  { text: this.$t('Common.Terminology.PayCycle') },
                  { text: getValue(this.dashboardDetails, 'bonuses.cw.cw_name', '-'), class: this.valueClass },
                ],
                [
                  { text: this.$t('Dashboard.Landing.Bonuses.PerformanceBonus') },
                  {
                    text: getValue(this.dashboardDetails, 'bonuses.performance_bonus', '-'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.Bonuses.ManagerBonus') },
                  { text: getValue(this.dashboardDetails, 'bonuses.manager_bonus', '-'), class: this.valueClass },
                ],
                [
                  { text: this.$t('Dashboard.Landing.Bonuses.LeadershipBonus') },
                  {
                    text: getValue(this.dashboardDetails, 'bonuses.leadership_bonus', '-'),
                    class: this.valueClass,
                  },
                ],
                [
                  { text: this.$t('Dashboard.Landing.Bonuses.ManagerAchievementBonus') },
                  {
                    text: getValue(this.dashboardDetails, 'bonuses.manager_achievement_bonus', '-'),
                    class: this.valueClass,
                  },
                ],
              ],
              class: ['border-bottom', 'pb-3'],
            },
            {
              items: [
                [
                  { text: this.$t('Dashboard.Landing.Bonuses.YearEndBonus') },
                  { text: getValue(this.dashboardDetails, 'bonuses.year_end_bonus', '-'), class: this.valueClass },
                ],
                [
                  { text: this.$t('Dashboard.Landing.Bonuses.CarBonus') },
                  { text: getValue(this.dashboardDetails, 'bonuses.car_bonus', '-'), class: this.valueClass },
                ],
                [
                  { text: this.$t('Dashboard.Landing.Bonuses.HouseBonus') },
                  { text: getValue(this.dashboardDetails, 'bonuses.house_bonus', '-'), class: this.valueClass },
                ],
                [
                  { text: this.$t('Dashboard.Landing.Bonuses.TravellingBonus') },
                  {
                    text: getValue(this.dashboardDetails, 'bonuses.travelling_bonus', '-'),
                    class: this.valueClass,
                  },
                ],
              ],
              class: ['border-bottom', 'pb-3'],
            },
          ],
        },
      }
    },

    overviewElements() {
      return [
        {
          icon: ActiveSvIcon,
          titleStyle: 'color: #2bb102',
          containerClass: ['order-lg-3', 'order-xl-1'],
          descriptionText: this.$t('Common.ActiveUntil'),
          title: this.$helpers.getValue(this.dashboardDetails, 'active_until_cw.cw_name', '-'),
        },
        {
          icon: EnrolmentIcon,
          titleClass: ['text-white'],
          title: this.$t('Enrolment.Enrolment.Title'),
          containerClass: ['order-lg-1', 'order-xl-2'],
          backgroundStyle: `background-color: #1699df !important`,
          to: {
            name: 'New Enrolment',
            params: { ...((this.enrolmentSponsorId && { sponsorID: this.enrolmentSponsorId }) || {}) },
          },
        },
        {
          icon: ReportIcon,
          to: { name: 'Report' },
          containerClass: ['order-lg-4', 'order-xl-3'],
          title: this.$t('Dashboard.Landing.ViewLatestEStatement'),
        },
        {
          icon: EshopIcon,
          titleClass: ['text-white'],
          to: { name: 'ListingHome' },
          title: this.$t('Common.Eshop'),
          containerClass: ['order-lg-2', 'order-xl-4'],
          backgroundStyle: `background-color: #2bb102 !important`,
        },
      ]
    },
  },
  mounted() {
    this.loadCwScheduleList(this.payCycleFilter).then(cycles => {
      this.payCycleOptions = (cycles || []).map(cycle => ({
        text: this.$t('Dashboard.Landing.Cw.Label', { date: cycle.cw_name }),
        value: cycle.id,
      }))
      this.selectedPayCycle = this.$helpers.getValue(cycles, '[0].id', null)
    })
  },
  methods: {
    ...mapActions(['loadMemberDashBoardDetail', 'loadCwScheduleList']),
  },
}
</script>
