<template>
  <div class="card height-50 card-borderless" :class="[ kontrastJeAktivny ? 'bg-dark' : 'bg-white' ]">
    <div class="card-title">
      <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="$emit('textZmensit')" title="Zmenšiť text">
                <i class="icon-circle-with-minus fa-2x"></i>
              </a>
              <a class="nav-item nav-link" @click="$emit('textZvacsit')" title="Zväčšiť text">
                <i class="icon-circle-with-plus fa-2x"></i>
              </a>
              <a class="nav-item nav-link" @click="$emit('zmenitKontrast')" title="Kontrastný režim">
                <i class="icon-adjust fa-2x" :class="{ 'text-blue' : kontrastJeAktivny }"></i>
              </a>
          </div>
        </div>
      </nav>
    </div>
    <hr>
    <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">
      <div class="row justify-content-md-between">
        <div class="col-md-9 col-sm-12 py-1 py-md-0">
          <b-pagination
              size="sm"
              limit="15"
              per-page="1"
              v-model="zvolenaOtazkaIdx"
              :total-rows="test.otazky.length"
          ></b-pagination>
        </div>
        <div class="col-md-3 col-sm-12 py-1 py-md-0">
          <button class="btn btn-lg btn-sm btn-outline-success btn-block" @click="$emit('vyhodnotitTest')">
            <i class="icon-check"></i>
            Vyhodnotiť test
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OtazkaComponent from './Otazka'
import { BPagination } from 'bootstrap-vue'
import ZoznamOdpovediComponent from './ZoznamOdpovedi'

export default {
  name: 'TestComponent',
  components: {
    BPagination,
    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,
    }
  },
  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>
