<template>
    <div class="modal fade text-dark" id="vysledokVyhladavaniaModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-center-viewport" role="document">
            <div class="modal-content">
                <div class="modal-header modal-header-borderless justify-content-end">
                    <button type="button" class="close" aria-label="Close" @click="$emit('zavrietDialog')">
                        <span aria-hidden="true">
                            <i class="fa fa-times"></i>
                        </span>
                    </button>
                </div>
                <div class="modal-body d-flex justify-content-center">
                    <div class="container">
                        <div class="row justify-content-center text-center section-intro">
                            <div class="col-12 col-md-9 col-lg-8">
                                <h2 class="display-4 text-dark">Výsledok vyhľadávania</h2>
                                <span class="lead text-dark">Vyhľadával sa text <i>"<strong>{{ vyhladavane }}</strong>"</i>, {{ frazaPoctuVysledkov }}</span>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-12 col-md-10">
                                <h4 class="mb-4 text-dark">Učebné materiály</h4>
                                <div class="card mb-2">
                                    <div v-if="najdeneUcebneMaterialy" class="list-group list-group-lg list-group-flush">
                                        <div v-for="(ucebnyMaterial, index) in ucebneMaterialy" class="list-group-item" :key="index">
                                            <div class="w-100 d-flex justify-content-between">
                                                <a :href="ucebnyMaterial.link" class="mb-1 text-dark">
                                                    <h4>{{ ucebnyMaterial.nazov }}</h4>
                                                </a>
                                                <small>{{ formatovatDatum(ucebnyMaterial.datum_zmeny) }}</small>
                                            </div>
                                            <p class="mb-1">{{ ucebnyMaterial.popis }}</p>
                                            <div v-if="ucebnyMaterial.sekcie">
                                                <h5 class="text-dark">Sekcie</h5>
                                                <ul>
                                                    <li v-for="(sekcia, ind) in ucebnyMaterial.sekcie" class="text-dark" :key="ind">
                                                        <a class="text-dark" :href="sekcia.link">{{ sekcia.nazov }}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <small>{{ ucebnyMaterial.autor }}</small>
                                        </div>
                                    </div>
                                    <div v-else class="justify-content-center text-center">
                                        <h5 class="italic">žiadny výsledok vyhľadávania</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer modal-footer-borderless justify-content-center">
                    <button type="button" class="btn btn-lg btn-primary my-2" data-dismiss="modal" @click="$emit('zavrietDialog')">Zavrieť</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'ModalDialog',
    mounted() {
      $('#vysledokVyhladavaniaModal').modal({
        show: false,
        backdrop: 'static',
        keyboard: false,
      })
    },
    props: {
      zobrazit: {
        require: true,
        type: Boolean,
      },
      vyhladavane: {
        required: true,
        type: String,
        default: '',
      },
      polozky: {
        required: true,
        type: Object,
        default: {},
      }
    },
    computed: {
      ucebneMaterialy: function () {
        let vystup = []

        // ucebnice
        if (this.pocetNajdenychPoloziekUcebnychMaterialov > 0) {
          this.polozky.ucebne_materialy.forEach(function (ucebnica) {
            vystup.push(ucebnica)
          })
        }

        // ucebnice zo sekcie
        if (this.pocetNajdenychPoloziekSekciiUcebnychMaterialov > 0) {
          this.polozky.sekcie.forEach(function (sekcia) {
            if (vystup.length) {
              vystup = vystup.filter((ucebnica) => {
                return ucebnica.id != sekcia.ucebnica.id
              })
            }

            vystup.push(sekcia.ucebnica)
          })

          this.polozky.sekcie.forEach(function (sekcia) {
            vystup.forEach(function (ucebnica) {
              if (! ucebnica.hasOwnProperty('sekcie')) {
                ucebnica['sekcie'] = []
              }

              if (ucebnica.id == sekcia.ucebnica_id) {
                ucebnica.sekcie.push(sekcia)
              }
            })
          })
        }

        // let _sekcia = sekcia
        // let ucebnica = sekcia.ucebnica
        // _sekcia.ucebnica = null
        // ucebnica.sekcie = []

        return vystup
      },
      pocetNajdenychPoloziekUcebnychMaterialov: function () {
        return this.polozky.ucebne_materialy.length || 0
      },
      pocetNajdenychPoloziekSekciiUcebnychMaterialov: function () {
        return this.polozky.sekcie.length || 0
      },
      najdeneUcebneMaterialy: function () {
        return this.pocetNajdenychPoloziekUcebnychMaterialov > 0 || this.pocetNajdenychPoloziekSekciiUcebnychMaterialov > 0
      },
      frazaPoctuVysledkov: function () {
        let pocet = this.pocetNajdenychPoloziekUcebnychMaterialov + this.pocetNajdenychPoloziekSekciiUcebnychMaterialov

        if (pocet <= 0) {
          return 'bez výsledku'
        }

        if (pocet < 2) {
          return `bol nájdený ${pocet} výsledok`
        }

        if ((5 > pocet) && (pocet > 1)) {
          return `boli nájdené ${pocet} výsledky`
        }

        if (pocet > 4) {
          return `bolo nájdených ${pocet} výsledkov`
        }
      }
    },
    methods: {
      formatovatDatum: function (datum) {
        const dObj = new Date(datum)

        return dObj.toLocaleString('sk-SK')
      }
    },
    watch: {
      'zobrazit': function (newVal, oldVal) {
        let state = 'hide'

        if (newVal) state = 'show'

        $('#vysledokVyhladavaniaModal').modal(state)
      }
    }
  }
</script>

<style scoped>
    .modal-center-viewport {
        display: block !important;
    }
</style>