<template>
  <div class="card height-50 card-borderless" :class="[ kontrastJeAktivny ? 'bg-dark' : 'bg-transparent' ]">
    <div class="card-body">
      <div class="card-text">
        <otazka-component
            :otazka="otazka"
            :velkost-pisma="velkostPisma"
        ></otazka-component>
      </div>
      <hr>
      <div class="card-text">
        <zoznam-odpovedi-component
            :odpovede="otazka.odpovede"
            :velkost-pisma="velkostPisma"
        ></zoznam-odpovedi-component>
      </div>
    </div>
    <div class="card-footer py-2">
      <div class="row justify-content-md-between">
        <div class="col-md-9 col-sm-12 py-1 py-md-0">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary" @click.prevent="predchadzajucaOtazka()">
              <i class="icon-left-open"></i>
            </button>
            <div class="btn-group" role="group">
              <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                <span class="badge badge-light">Otázka {{ this.zvolenaOtazkaIdx }} z {{ test.otazky.length }}</span>
                <div class="dropdown-menu" style="z-index:1050!important;top:60px!important;">
                  <a class="dropdown-item" @click.prevent="zobrazitOtazku(index + 1)" v-for="(otazka, index) in test.otazky" :key="otazka.id">{{ index + 1 }}</a>
                </div>
              </button>
            </div>
            <button type="button" class="btn btn-primary" @click.prevent="nasledujucaOtazka()">
              <i class="icon-right-open"></i>
            </button>
          </div>
        </div>
        <div class="col-md-3 col-sm-12 py-1 py-md-0">
          <button class="btn btn-success btn-block" @click.prevent="$emit('vyhodnotitTest')">
            <i class="icon-check mr-1"></i>
            Vyhodnotiť test
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OtazkaComponent from './Otazka'
import ZoznamOdpovediComponent from './ZoznamOdpovedi'

export default {
  name: 'TestComponent',
  components: {
    OtazkaComponent,
    ZoznamOdpovediComponent,
  },
  props: {
    test: {
      type: Object,
      required: true,
      default () {
        return {
          id: null,
          nazov: null,
          popis: null,
          casova_znacka_vyhodnotenia: null,
          pocet_nespravnych_odpovedi: null,
          otazky: [],
        }
      },
    },
    velkostPisma: {
      type: Number,
      required: true,
      default: 1.2,
    },
    kontrastJeAktivny: {
      required: true,
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      zvolenaOtazkaIdx: 1,
    }
  },
  methods: {
    predchadzajucaOtazka () {
      if (this.zvolenaOtazkaIdx > 1) {
        --this.zvolenaOtazkaIdx
      }
    },
    nasledujucaOtazka () {
      if (this.zvolenaOtazkaIdx < this.test.otazky.length) {
        ++this.zvolenaOtazkaIdx
      }
    },
    zobrazitOtazku (idx) {
      this.zvolenaOtazkaIdx = idx
    },
  },
  computed: {
    otazka: function () {
      return this.test.otazky.filter(function (otazka, index) {
        return index === this.zvolenaOtazkaIdx - 1
      }, this)[0] ?? {
        id: null,
        znenie: '???',
        odpovede: [
          {
            id: null,
            znenie: null,
            zvolena: false,
          }
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>
