import Helpers from '@/helpers'

export default {
  computed: {
    currentActiveLeft() {
      return Helpers.getValue(this.getIwbStatus, 'builder.next.left_active') || 0
    },
    currentActiveRight() {
      return Helpers.getValue(this.getIwbStatus, 'builder.next.right_active') || 0
    },
    iwbState: vue => state => {
      // TODO: temporary fix
      let leftArr
      let rightArr
      leftArr = new Array(Helpers.getValue(vue.getIwbStatus, state + '.left') || 0)
      rightArr = new Array(Helpers.getValue(vue.getIwbStatus, state + '.right') || 0)
      leftArr.fill(true, 0, Helpers.getValue(vue.getIwbStatus, state + '.left_active') || 0)
      rightArr.fill(true, 0, Helpers.getValue(vue.getIwbStatus, state + '.right_active') || 0)

      return {
        key: Helpers.capitalCase(state),
        displayStatuses: leftArr.length !== 0 && rightArr.length !== 0,
        left: { key: 'left', value: leftArr },
        right: { key: 'right', value: rightArr },
        achievement: [
          {
            text: vue.$t('Dashboard.Landing.FSBStatus.Status', {
              zone: Helpers.getValue(vue.getIwbStatus, state + '.builder_name') || 'N/A',
            }),
            status: vue.statusToIconConverter(Helpers.getValue(vue.getIwbStatus, state + '.builder_achieved')),
          },
          {
            ...(Helpers.getValue(vue.getIwbStatus, state + '.rank') !== '-'
              ? {
                  text: vue.$t('Dashboard.Landing.FSBStatus.Rank', {
                    rank: Helpers.getValue(vue.getIwbStatus, state + '.rank_name') || 'N/A',
                  }),
                  status: vue.statusToIconConverter(Helpers.getValue(vue.getIwbStatus, state + '.rank_achieved')),
                }
              : {}),
          },
        ],
        reward: Helpers.getValue(vue.getIwbStatus, state + '.text'),
      }
    },
  },
  methods: {
    statusToIconConverter(status) {
      if (status) {
        return {
          icon: 'check-circle',
          iconColor: 'text-info-green',
        }
      } else {
        return {
          icon: 'times-circle',
          iconColor: 'text-danger',
        }
      }
    },
  },
}
