<template>
  <div class="content">
    <team-header/>
    <hr/>
    <section>
      <h1>Bravo !</h1>
      <p class="text-center">Merci pour votre contribution à la production locale et bravo pour votre implication.</p>
      <div v-if="!loading" class="chart-area">
        <polar-area-chart :data="scores"/>
        <Legend/>
      </div>
      <loader v-else class="center"/>
      <nuxt-link class="button orange" to="/dashboard">Retour à l'accueil</nuxt-link>

    </section>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "nuxt-property-decorator";
import {AxiosResponse} from "axios";
import {RepositoryFactory} from "~/repositories/RepositoryFactory";
import { Score} from "~/repositories/models/quiz.model";

@Component
export default class Result extends Vue {
  readonly quizRepository = RepositoryFactory.get('quiz');

  private scores: number[] = [];
  private loading = false;

  mounted() {
    this.loading = true;
    try {
      this.quizRepository.findScores(this.$route.query.quiz).then((response: AxiosResponse<Score[]>) => {
        this.scores = response.data.map(value => value.scoreAvg);
      });
    } catch (e: any) {
      console.info("error", e);
    } finally {
      this.loading = false;
    }
  }
}
</script>

<style lang="scss" scoped>

@import "assets/css/spacing";

.chart-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: $x_small 0;
}

</style>
