<template>
    <div class="container pt-5">
        <div class="row justify-content-center mb-5">
            <div class="col-auto text-center">
                <h3 class="h4">Vyhľadávanie v učebných materiáloch knižnice</h3>
                <h2 class="display-4">Hľadáte konkrétny text?</h2>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-12 col-md-10 col-lg-8">
                <form class="card card-sm" @submit.prevent>
                    <div class="card-body row no-gutters align-items-center shadow">
                        <div class="col-auto">
                            <i class="icon-search h4 text-body"></i>
                        </div>
                        <div class="col">
                            <input v-model="hladanyText" class="form-control form-control-lg form-control-borderless" type="search" placeholder="Vyhľadať text v učebných materiáloch">
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-lg btn-success" @click="vyhladatText()" :disabled="!validaciaVstupuVyhladavania">
                                <span class="spinner-grow spinner-grow-sm" role="status" :style="{ display: ziskavajuSaUdaje ? 'inline-block' : 'none' }"></span>
                                Vyhľadať
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <modal-dialog :zobrazit.sync="zobrazitDialog" :vyhladavane.sync="hladanyTextOsetreny" :polozky.sync="vysledok" @zavrietDialog="zavrietDialog()"></modal-dialog>
    </div>
</template>

<script>
  import ModalDialog from './components/ModalDialog'

  export default {
    components: {
      ModalDialog
    },
    data () {
      return {
        zobrazitDialog: false,
        hladanyText: '',
        vysledok: {
          ucebne_materialy: [],
          sekcie: [],
        },
        ziskavajuSaUdaje: false,
      }
    },
    computed: {
      validaciaVstupuVyhladavania: function () {
        // je zadany nejaky text?
        // obsahuje zadany text bez medzier viac ako dva znaky?
        return (!!this.hladanyText && this.hladanyText.trim().length > 2)
      },
      hladanyTextOsetreny: function () {
        if (!!this.hladanyText) {
          return this.hladanyText.trim()
        }

        return ''
      }
    },
    methods: {
      async vyhladatText () {
        const that = this

        this.ziskavajuSaUdaje = true

        try {
          await window.axios.get(
            'vyhladavanie',
            {
              params: {
                text: that.hladanyText,
                'include[]': 'ucebnica.kategoria',
              }
            }).then(function (response) {
              that.vysledok = !!response.data ? response.data : {ucebne_materialy: [], sekcie: []}
            }).catch(function (error) {
              that.vysledok = []
              alert('Chyba počas vyhľadávania, podrobnejšie informácie získate v konzole.')
              console.error(error)
            }).then(function () {
              that.zobrazitDialog = true
              that.ziskavajuSaUdaje = false
            })
        } catch (error) {
          that.vysledok = []
          that.ziskavajuSaUdaje = false
          alert('Chyba počas vyhľadávania, podrobnejšie informácie získate v konzole.')
          console.error(error)
        }
      },
      zavrietDialog () {
        this.zobrazitDialog = false
      }
    }
  }
</script>

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