<template>
  <section class="space-sm pb-4" :class="[ kontrast ? 'bg-dark' : 'bg-transparent' ]">
    <div class="container">
      <div class="row justify-content-between align-items-center mb-3">
        <div class="col-auto">
          <h1 class="h2">Test <strong>{{ test.nazov }}</strong></h1>
          <h5 class="text-muted text-truncate">{{ test.popis }}</h5>
        </div>
        <div class="col-auto text-right">
          <nav class="navbar navbar-expand">
            <div class="collapse navbar-collapse navbar-toggle justify-content-end">
              <div class="navbar-nav">
                <a class="nav-item nav-link" @click.prevent="textZmensit()" data-toggle="tooltip" title="Zmenšiť text">
                  <i class="icon-minus-circled fa-2x"></i>
                </a>
                <a class="nav-item nav-link" @click.prevent="textZvacsit()" data-toggle="tooltip" title="Zväčšiť text">
                  <i class="icon-plus-circled fa-2x"></i>
                </a>
                <a class="nav-item nav-link" @click.prevent="zmenitKontrast()" data-toggle="tooltip" title="Kontrastný režim">
                  <i class="icon-adjust fa-2x" :class="{ 'text-blue' : kontrast }"></i>
                </a>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <div class="row justify-content-md-between">
        <div class="col-12">
          <test-component
              :test="test"
              :velkost-pisma="velkostPisma"
              :kontrast-je-aktivny="kontrast"
              @vyhodnotitTest="vyhodnotitTest"
          ></test-component>
        </div>
      </div>
      <b-overlay
          :show="ziskavajuSaUdaje"
          no-wrap
          fixed
          opacity="0.4"
          variant="dark"
          spinner-type="grow"
          spinner-variant="primary"
      ></b-overlay>
    </div>
  </section>
</template>

<script>
import { BOverlay } from 'bootstrap-vue'
import TestComponent from './components/Test'

export default {
  components: {
    BOverlay,
    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.0,
      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') ?? false)
      this.velkostPisma = JSON.parse(localStorage.getItem('nastavenia.zobrazenie.velkostPisma') ?? 1.0)
    }
  },
  methods: {
    suZodpovedaneVsetkyOtazky () {
      return this.test.otazky.filter(
        (otazka) => {
          return otazka.odpovede.filter(
            (odpoved) => {
              return odpoved.zvolena
            }
          ).length > 0
        }
      ).length === this.test.otazky.length
    },
    vyhodnotitTest () {
      if (this.suZodpovedaneVsetkyOtazky()) {
        this.$bvModal.msgBoxConfirm('Chystáte sa vyhodnotiť test, prajete si pokračovať?', {
          title: 'Potvrdenie',
          size: 'md',
          okVariant: 'warning',
          centered: true,
          okTitle: 'Áno',
          cancelTitle: 'Zrušiť',
        }).then((odpoved) => {
          if (true === odpoved) {
            this.akciaVyhodnoteniaTestu()
          }
        })
      } else {
        this.$bvModal.msgBoxConfirm('Nie sú zodpovedané všetky otázky testu, prajete si pokračovať?', {
          title: 'Potvrdenie',
          size: 'md',
          okVariant: 'warning',
          centered: true,
          okTitle: 'Áno',
          cancelTitle: 'Zrušiť',
        }).then((odpoved) => {
          if (true === odpoved) {
            this.akciaVyhodnoteniaTestu()
          }
        })
      }
    },
    async akciaVyhodnoteniaTestu () {
      const that = this

      try {
        that.ziskavajuSaUdaje = true

        await window.axios.patch(
            this.urlVyhodnotenia,
            that.transformaciaTestuPreVyhodnotenie()
        ).then(function (response) {
          if (response.data.redirect_to) {
            location.replace(response.data.redirect_to)
          } else {
            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>
