<template>
 <div class="results__card"
      :class="{'results__card--unavailable': disabled}"
 >
   <div class="results__button-container">
     <button
       class="results__button results__button--green"
       :class="{'results__button--green--active': currentQL === qLevels.strongly }"
       @click="currentQL = qLevels.strongly"
     >Strongly Qualified</button>
     <button
       class="results__button results__button--yellow"
       :class="{'results__button--yellow--active': currentQL === qLevels.somewhat }"
       @click="currentQL = qLevels.somewhat"
     >Somewhat Qualified</button>
     <button
       class="results__button results__button--red"
       :class="{'results__button--red--active': currentQL === qLevels.not }"
       @click="currentQL = qLevels.not"
     >Not Qualified</button>
   </div>
   <div class="results__body">
     <div class="results__chart">
       <bar
         :width="400"
         :height="400"
         :chart-data="chartData"
         :chart-options="chartOptions"
       >
       </bar>
       <p class="results__yaxe-desc">Average Score</p>
     </div>
   </div>
 </div>
</template>

<script>
 import Bar from './Bar'

 import { CHART_COLORS_BY_USER_ROLE as URColor } from '../colors'

 const QUALIFICATION_LEVELS = {
   strongly: 'STRONGLY_QUALIFIED',
   somewhat: 'SOMEWHAT_QUALIFIED',
   not: 'NOT_QUALIFIED',
 }
 const STACK_NAMES_LIST = [
   'Ceo',
   'Board',
   'Staff',
   'Hq',
   'Country',
 ]

 function getStacked (stack) {
   return {
     label: '',
     backgroundColor: URColor.stacked,
     hoverBackgroundColor: URColor.stacked,
     data: [10],
     stack,
   }
 }

 function getStacks () {
   return STACK_NAMES_LIST.map(getStacked)
 }

 export default ({
   name: 'Results',
   components: {
     Bar,
   },
   data () {
     return {
       currentQL: this.$props.qualificationLevel,
       qLevels: QUALIFICATION_LEVELS,
     }
   },
   props: {
     qualificationLevel: {
       type: String,
       default: QUALIFICATION_LEVELS.strongly,
     },
     results: {
       type: Object,
       default: null,
     },
     disabled: {
       type: Boolean,
       required: true,
     }
   },
   computed: {
     qualificationKey () {
       switch (this.currentQL) {
         case QUALIFICATION_LEVELS.strongly: return 'strongly'
         case QUALIFICATION_LEVELS.somewhat: return 'somewhat'
         case QUALIFICATION_LEVELS.not: return 'not'
       }
     },
     ceo () {
       if (!this.results) return 0
       return this.results[this.qualificationKey].ceo.averageScore
     },
     board () {
       if (!this.results) return 0
       return this.results[this.qualificationKey].board.averageScore
     },
     staff () {
       if (!this.results) return 0
       return this.results[this.qualificationKey].staff.averageScore
     },
     hq () {
       if (!this.results) return 0
       return this.results[this.qualificationKey].hq.averageScore
     },
     country () {
       if (!this.results) return 0
       return this.results[this.qualificationKey].country.averageScore
     },
     chartData () {
       return {
         datasets: [
           {
             label: 'CEO (Self Assessment)',
             backgroundColor: [URColor.ceo, '#fff'],
             hoverBackgroundColor: [URColor.ceo, '#fff'],
             data: [this.ceo],
             stack: STACK_NAMES_LIST[0],
           },
           {
             label: 'Board',
             backgroundColor: URColor.board,
             hoverBackgroundColor: URColor.board,
             data: [this.board],
             stack: STACK_NAMES_LIST[1],
           },
           {
             label: 'Staff',
             backgroundColor: URColor.staff,
             hoverBackgroundColor: URColor.staff,
             data: [this.staff],
             stack: STACK_NAMES_LIST[2],
           },
           {
             label: 'HQ',
             backgroundColor: URColor.hq,
             hoverBackgroundColor: URColor.hq,
             data: [this.hq],
             stack: STACK_NAMES_LIST[3],
           },
           {
             label: 'Country',
             backgroundColor: URColor.country,
             hoverBackgroundColor: URColor.country,
             data: [this.country],
             stack: STACK_NAMES_LIST[4],
           },
           ...getStacks(),
         ]
       }
     },
     chartOptions () {
       return {
         tooltips: {
           enabled: true,
         },
         legend: false,
         title: {
           display: false,
         },
         maintainAspectRatio: false,
         scales: {
           xAxes: [{
             stacked: true,
             categoryPercentage: 1.0,
             barPercentage: 0.6,
             scaleLabel: {
               beginAtZero: true,
             },
           }],
           yAxes: [{
             stacked: true,
             display: true,
             gridLines: {
               display: false,
             },
             ticks: {
               display: true,
               beginAtZero: true,
               callback: function (value) {
                 if (value === 1 || value === 5) return value
               },
               fontColor: URColor.stacked,
               fontSize: 20,
               min: 0,
               max: 5,
             }
           }],
         }
       }
     }
   },
 })
</script>

<style lang="scss" scoped>
 @import "../../../styles/variables";

 .results {
   &__yaxe-desc {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     color: $grey;
     font-size: 1.4rem;
     transform: rotate(-90deg);
     margin: 0;
     padding: 0;
     text-align: center;
     pointer-events: none;
   }

   &__button {
     &-container {
       display: inline-flex;
     }

     display: flex;
     flex: 1;
     margin: 1rem 0.2rem;
     padding: 0;
     color: $white;
     border: 2px solid black;
     min-width: 8rem;
     min-height: 2rem;
     align-items: center;
     justify-content: center;
     border-radius: 5px;

     &--green {
       color: $green;
       border-color: $green;
       background-color: white;

       &--active {
         color: $white;
         background-color: $green;
       }
     }

     &--red {
       color: $red;
       border-color: $red;
       background-color: white;

       &--active {
         color: $white;
         background-color: $red;
       }
     }

     &--yellow {
       color: $orange;
       border-color: $orange;
       background-color: white;

       &--active {
         color: $white;
         background-color: $orange;
       }
     }
   }

   &__card {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: column;
     width: 27rem;
     height: 32rem;
     margin: 0.5rem;
     user-select: none;
     &--unavailable {
       filter: grayscale(100%);
     }
   }
   &__body {
     display: flex;
     flex: 1;
     align-items: center;
     justify-content: center;
   }
   &__title {
     font-size: 1.4rem;
     font-weight: bold;
   }
   &__chart {
     display: flex;
     flex: 1;
     position: relative;
     margin: 0;
     padding: 0;
   }
 }
</style>