<!--
   Copyright 2018 Brigham Young University

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->
<template>
  <table class="table table-borderless table-sm">
    <thead>
      <tr>
        <th>Test Name</th>
        <th>Test Date</th>
        <th>Date Processed</th>
        <th class="composite">Composite Score</th>
        <th>Scores</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(ts, i) in orderedTestScores">
        <td>
          {{ts.testName}}
          <template v-if="ts.selfReported">
            <br>
            <strong><em>Self Reported</em></strong>
          </template>
          <template v-if="!ts.optIn">
            <br>
            <strong><em>Opt-Out</em></strong>
          </template>
        </td>
        <td>{{ts.testDate | dateFormat}}</td>
        <td>{{ts.dateProcessed | dateFormat}}</td>
        <td v-if="/^SAT/.test(ts.testName)" class="composite">
          <span class="badge badge-primary x-lg">{{ts.compositeScore}}</span>
          <br>
          <span class="bold">({{ts.compositeScore | sat2ActFilter}} ACT)</span>
        </td>
        <td v-else class="composite">
          <span class="badge badge-primary x-lg">{{ts.compositeScore | removeLeadingZeros}}</span>
        </td>
        <td>
          <table class="table table-borderless table-sm" v-if="ts.testComponents.length > 0">
            <thead>
              <th v-for="sub in ts.testComponents" :key="sub.name">{{sub.name}}</th>
            </thead>
            <tbody>
              <td v-for="sub in ts.testComponents" :key="sub.name">{{sub.score | removeLeadingZeros}}</td>
            </tbody>
          </table>
        </td>
      </tr>
      <tr v-if="testScores.length===0">
        <td colspan="4">No test scores recorded</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
import { mapGetters } from 'vuex'
import { dateFormat } from './dateTimeFormat'
import { sat2ActFilter } from './sat2Act'

function yearMonth2Date (yearMonth) {
  if (!/^[0-9]{4}-[0-9]{2}$/.test(yearMonth)) {
    return yearMonth
  }
  const year = yearMonth.slice(0, 4)
  const month = yearMonth.slice(5, 7)
  return new Date(year, parseInt(month) - 1)
}

export default {
  name: 'DetailsTestScores',
  computed: {
    ...mapGetters([ 'testScores' ]),

    orderedTestScores() {
      // sort test scores by test date
      const scores = this.testScores.slice().sort((a, b) => {
        const dt1 = yearMonth2Date(a.testDate)
        const dt2 = yearMonth2Date(b.testDate)
        if (!dt1 instanceof Date && !dt2 instanceof Date) return 0
        if (!dt1 instanceof Date) return 1
        if (!dt2 instanceof Date) return -1

        return dt1 < dt2 ? 1 : -1
      })

      // sort 'reading' before 'listening' for TOEFL test
      for (let score of scores) {
        if (!score.testComponents || score.testName !== 'TOEFL') continue
        score.testComponents = score.testComponents.sort((a, b) => {
          if (a.name === 'listening' && b.name === 'reading') return 1
          return 0
        })
      }
      return scores
    }
  },
  filters: {
    dateFormat,
    sat2ActFilter,
    removeLeadingZeros: function (value) {
      if ( (!value) || !(/^\d+$/.test(value)) ) return value // leave as is if not a string of numbers
      return parseInt(value, 10) // remove leading zeros
    }
  }
}
</script>
<style scoped>
.composite {
  text-align: center;
  vertical-align: center;
}
.x-lg {
  font-size: 1.4rem;
  font-weight: 700;
}
.bold {
  font-weight: 700;
}
</style>
