<template>
  <div class="container pt-3" :class="[ kontrast ? 'bg-dark' : 'bg-white' ]">
    <div class="row justify-content-center mb-3">
      <div class="col-12 text-left">
        <h3>Test <strong>{{ test.nazov }}</strong></h3>
        <h5>{{ test.popis }}</h5>
      </div>
    </div>
    <div class="row justify-content-md-between">
      <div class="col-12">
        <test-component
            :test="test"
            :velkost-pisma="velkostPisma"
            :kontrast-je-aktivny="kontrast"
            @textZmensit="textZmensit()"
            @textZvacsit="textZvacsit()"
            @vyhodnotitTest="vyhodnotitTest"
            @zmenitKontrast="zmenitKontrast()"
        ></test-component>
      </div>
    </div>
    <div
        style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1100; background-color: rgba(3, 169, 244, 0.5);"
        class="justify-content-center"
        :style="{ display: ziskavajuSaUdaje ? 'flex' : 'none' }"
    >
      <span class="spinner-grow text-indigo align-self-center" style="width: 4rem; height: 4rem;" role="status"></span>
    </div>
  </div>
</template>

<script>
import TestComponent from './components/Test'

export default {
  components: {
    TestComponent,
  },
  props: {
    test: {
      type: Object,
      required: true,
      default () {
        return {
          id: null,
          nazov: null,
          popis: null,
          casova_znacka_vyhodnotenia: null,
          pocet_nespravnych_odpovedi: null,
          otazky: [],
        }
      },
    },
    urlVyhodnotenia: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      kontrast: false,
      velkostPisma: 1.2,
      ziskavajuSaUdaje: false,
    }
  },
  watch: {
    'kontrast': function (newValue, oldValue) {
      if (localStorage) {
        localStorage.setItem('nastavenia.zobrazenie.kontrast', JSON.stringify(newValue))
      }
    },
    'velkostPisma': function (newValue, oldValue) {
      if (localStorage) {
        localStorage.setItem('nastavenia.zobrazenie.velkostPisma', JSON.stringify(newValue))
      }
    },
  },
  created () {
    if (localStorage) {
      this.kontrast = JSON.parse(localStorage.getItem('nastavenia.zobrazenie.kontrast'))
      this.velkostPisma = JSON.parse(localStorage.getItem('nastavenia.zobrazenie.velkostPisma'))
    }
  },
  methods: {
    suZodpovedaneVsetkyOtazky () {
      return this.test.otazky.filter(
        (otazka) => {
          return otazka.odpovede.filter(
            (odpoved) => {
              return odpoved.zvolena
            }
          ).length > 0
        }
      ).length === this.test.otazky.length
    },
    async vyhodnotitTest () {
      const that = this

      if (this.suZodpovedaneVsetkyOtazky()) {
        if (false === confirm('Chystáte sa vyhodnotiť test, prajete si pokračovať?')) {
          return
        }
      } else {
        if (false === confirm('Nie sú zodpovedané všetky otázky testu, prajete si pokračovať?')) {
          return
        }
      }

      try {
        that.ziskavajuSaUdaje = true

        await window.axios.patch(
          this.urlVyhodnotenia,
          that.transformaciaTestuPreVyhodnotenie()
        ).then(function (response) {
          location.reload()
        }).catch(function (error) {
          console.error(error)

          switch (error.response.status) {
            case 403:
              alert('Nemáte oprávnenie pre vyhodnotenie testu iného používateľa.')
              break
            case 422:
              alert('Nesprávna štruktúra odosielaných údajov.')
              break
            default:
              alert('Chyba počas vyhodnocovania testu, podrobnejšie informácie získate v konzole.')
          }
        }).then(function () {
          // malo by dojst k presmerovaniu na stranku vyhodnotenia testu, loading by mal zostat zobrazeny
          // that.ziskavajuSaUdaje = false
        })
      } catch (error) {
        that.ziskavajuSaUdaje = false
        alert('Chyba počas vyhodnocovania testu, podrobnejšie informácie získate v konzole.')
        console.error(error)
      }
    },
    textZmensit () {
      const min = 0.5
      const velkost = this.velkostPisma - 0.1

      this.velkostPisma = velkost >= min ? velkost : min
    },
    textZvacsit () {
      const max = 3
      const velkost = this.velkostPisma + 0.1

      this.velkostPisma = velkost <= max ? velkost : max
    },
    zmenitKontrast () {
      this.kontrast = !this.kontrast
    },
    transformaciaTestuPreVyhodnotenie () {
      let test = Object.assign({}, this.test)

      delete test.nazov
      delete test.popis
      delete test.created_at
      delete test.updated_at
      delete test.pouzivatel_id
      delete test.casova_znacka_vyhodnotenia
      delete test.pocet_nespravnych_odpovedi

      test.otazky.forEach(function (otazka) {
        delete otazka.znenie
        otazka.odpovede.forEach(function (odpoved) {
          delete odpoved.znenie
        })
      })

      return test
    }
  },
}
</script>

<style lang="scss">
</style>
