<template>
  <div class="genealogy">
    <div class="genealogy-tree-item-container">
      <div class="genealogy-tree-item-content">
        <div class="genealogy-tree-item-left">
          <div class="genealogy-tree-item-left-group">
            <div
              class="genealogy-tree-icon-expand"
              v-if="typeof model.children !== 'undefined' && model.children !== null && model.children.length > 0"
              @click="toggleTreeItem($event)"
            >
              -
            </div>
            <div class="genealogy-tree-icon-blank" v-else />
            <div class="genealogy-tree-icon-status-user-container" v-if="model.depth === null || model.depth <= 0">
              <icon class="genealogy-tree-icon-status-user" name="user-circle" />
            </div>
            <div class="genealogy-tree-icon-status-active" v-else-if="isStatusActive(model)">
              {{ model.depth }}
            </div>
            <div class="genealogy-tree-icon-status-inactive" v-else-if="isStatusInactive(model)">
              {{ model.depth }}
            </div>
            <div class="genealogy-tree-icon-status-other" v-else-if="!isStatusInactive(model)">
              {{ model.depth }}
            </div>
            <div :class="getTreeItemMemberClass(model)" @click="selectViewIbo(model.ibo_id, model.ibo_name)">
              <span>{{ model.ibo_id }}</span
              >&nbsp;<span>({{ model.ibo_name }})</span>
            </div>
          </div>
        </div>
        <div class="genealogy-tree-item-right">
          <div class="genealogy-tree-item-right-group">
            <div class="genealogy-tree-item-direct-downline">
              {{ typeof model.total_direct_downlines !== 'undefined' ? model.total_direct_downlines : 0 }}
            </div>
            <div class="genealogy-tree-item-total-downline">
              {{ typeof model.total_downlines !== 'undefined' ? model.total_downlines : 0 }}
            </div>
            <div class="genealogy-tree-item-highest-rank text-capitalize">
              {{ getHighestRank }}
            </div>
            <div class="genealogy-tree-item-expiry-date">
              {{ model.expiry_date !== null ? model.expiry_date : $t('Genealogy.SponsorNetworkTree.NoDate') }}
            </div>
            <div class="genealogy-tree-item-left-downline">
              {{ model.total_active_left_downlines !== null ? model.total_active_left_downlines : 0 }}
            </div>
            <div class="genealogy-tree-item-right-downline">
              {{ model.total_active_right_downlines !== null ? model.total_active_right_downlines : 0 }}
            </div>
          </div>
        </div>
      </div>
      <div
        class="genealogy-tree-child-container"
        v-if="typeof model.children !== 'undefined' && model.children !== null && model.children.length > 0"
      >
        <sponsor-network-tree-item
          v-for="(childModel, index) in model.children"
          :key="index"
          :model="childModel"
          :view-ibo-id="viewIboId"
          :select-view-ibo="selectViewIbo"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'SponsorNetworkTreeItem',
  props: {
    model: Object,
    viewIboId: String,
    selectViewIbo: Function,
  },
  methods: {
    getTreeItemMemberClass: function(modelObject) {
      let className = ''
      if (modelObject.depth === null || modelObject.depth <= 0) {
        className = 'genealogy-tree-item-member-user'
      } else if (this.isStatusActive(modelObject)) {
        className = 'genealogy-tree-item-member-active'
      } else if (this.isStatusInactive(modelObject)) {
        className = 'genealogy-tree-item-member-inactive'
      } else if (!this.isStatusInactive(modelObject)) {
        className = 'genealogy-tree-item-member-other'
      }
      let iboId = '' + modelObject.ibo_id
      if (iboId.toUpperCase() === this.viewIboId.toUpperCase()) {
        className = className + ' genealogy-tree-item-member-selected'
      }
      return className
    },
    toggleTreeItem: function(event) {
      let collapsible = event.currentTarget
      while (collapsible.parentElement && collapsible.className !== 'genealogy-tree-item-content') {
        collapsible = collapsible.parentElement
      }
      if (collapsible.className === 'genealogy-tree-item-content') {
        collapsible = collapsible.nextElementSibling
        if (collapsible !== null && collapsible.className.indexOf('child') > 0) {
          let icon = event.currentTarget
          if (collapsible.style.display === 'none') {
            icon.innerHTML = '-'
            icon.className = 'genealogy-tree-icon-expand'
            collapsible.style.display = ''
          } else {
            icon.innerHTML = '+'
            icon.className = 'genealogy-tree-icon-collapse'
            collapsible.style.display = 'none'
          }
        }
      }
    },
    isStatusActive(modelObject) {
      if (modelObject.is_active_brand_ambassador !== null) {
        return (
          modelObject.is_active_brand_ambassador === 1 && modelObject.sales_activity_status.toUpperCase() === 'ACTIVE'
        )
      }
      return false
    },
    isStatusInactive(modelObject) {
      if (modelObject.is_active_brand_ambassador === null || modelObject.is_active_brand_ambassador === 0) {
        return (
          modelObject.sales_activity_status !== null && modelObject.sales_activity_status.toUpperCase() === 'ACTIVE'
        )
      }
      return false
    },
  },
  computed: {
    ...mapGetters(['getMemberEnrollmentRankList']),
    getHighestRank() {
      let { effective_rank, enrollment_rank, translated_effective_rank } = this.model
      let isBa =
        (this.getMemberEnrollmentRankList.find(rnk => rnk.rank_code === (effective_rank || enrollment_rank)) || {})
          .enrollment_type_id === 1

      return (
        (isBa && this.$t('Common.Terminology.Rank.Ba')) ||
        (effective_rank && this.$helpers.getValue(translated_effective_rank, 'content', effective_rank)) ||
        enrollment_rank
      )
    },
  },
}
</script>
