<template>
  <section
      class="space-sm pb-4 height-80"
      :class="[ kontrast ? 'bg-dark' : 'bg-white' ]"
      @oncut.stop.prevent
      @oncopy.stop.prevent
  >
    <div class="container align-self-baseline" style="font-family: serif;">
      <hlavicka-component
          :kontrast-je-aktivny="kontrast"
          :ucebny-material="ucebnyMaterial"
          :zalozka-je-skryta="skrytZalozku"
          :zalozka-je-aktivna="aktivnaZalozka"
          :menu-obsahu-je-skryte="menuObsahuSkryte"
          @textZmensit="textZmensit()"
          @textZvacsit="textZvacsit()"
          @zmenitZalozku="zmenitZalozku()"
          @zobrazitObsah="zobrazitObsah()"
          @zmenitKontrast="zmenitKontrast()"
      ></hlavicka-component>
      <div class="row justify-content-between align-items-center">
        <sekcie-component
            :sekcie="sekcie"
            :ucebny-material="ucebnyMaterial"
            :menu-obsahu-je-skryte="menuObsahuSkryte"
        ></sekcie-component>
        <obsah-component
            class="pt-3"
            :sekcia="sekcia"
            :navigacia="navigacia"
            :velkost-pisma="velkostPisma"
            :ucebny-material="ucebnyMaterial"
            :menu-obsahu-je-skryte="menuObsahuSkryte"
        ></obsah-component>
      </div>
    </div>
  </section>
</template>

<script>
import HlavickaComponent from './components/Hlavicka'
import ObsahComponent from './components/Obsah'
import SekcieComponent from './components/Sekcie'

export default {
  name: 'PrehliadacComponent',
  components: {
    ObsahComponent,
    SekcieComponent,
    HlavickaComponent,
  },
  props: {
    ucebnyMaterial: {
      required: true,
      type: Object,
      default() {
        return {}
      },
    },
    sekcia: {
      type: Object,
      default() {
        return {}
      },
    },
    sekcie: {
      required: true,
      type: Array,
      default() {
        return []
      },
    },
    navigacia: {
      type: Object,
      default: function () {
        return {
          predchadzajucaUrl: null,
          rodicUrl: null,
          nasledujucaUrl: null,
        }
      },
    },
  },
  data() {
    return {
      toastCount: 0,
      kontrast: false,
      velkostPisma: 1.0,
      menuObsahuSkryte: true,
      apiPoziadavkaAktivna: false,
      sekciaKopia: Object.assign(this.sekcia),
    }
  },
  methods: {
    zobrazitObsah() {
      this.menuObsahuSkryte = !this.menuObsahuSkryte
    },
    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
    },
    async zmenitZalozku() {
      let request = null
      const that = this

      // ak prebieha ina API poziadavka
      if (this.apiPoziadavkaAktivna) {
        return
      }

      // sekcia uz je ako oblubena
      if (
          this.sekciaKopia.hasOwnProperty('oblubene')
          && Array.isArray(this.sekciaKopia.oblubene)
          && this.sekciaKopia.oblubene.length > 0
      ) {
        request = window.axios.delete(`oblubene/${this.sekciaKopia.oblubene[0].hash_id}`)
      } else {
        request = window.axios.post(
            'oblubene',
            {
              typ: 'MODEL_TYPE_KNIZNICA_SEKCIA',
              id: this.sekciaKopia.id,
            },
        )
      }

      try {
        this.apiPoziadavkaAktivna = true
        let that = this

        await request.then(function (response) {
          if (response.config.method === 'post') {
            that.sekciaKopia.oblubene = [response.data.data]

            that.makeToast('Záložka bola vytvorená.', 'success', true)
          } else {
            that.sekciaKopia.oblubene = []

            that.makeToast('Záložka bola odstránená.', 'success', true)
          }
        }).catch(function (error) {
          console.error(error)
          that.makeToast('Záložka nebola vytvorená.', 'warning', true)
        })
      } catch (error) {
        console.error(error)
        that.makeToast('Chyba pri práci so záložkou.', 'danger', true)
      } finally {
        this.apiPoziadavkaAktivna = false
      }
    },
    zmenitKontrast() {
      this.kontrast = !this.kontrast
    },
    makeToast(sprava, variant = 'primary', pridat = false) {
      this.toastCount++
      this.$bvToast.toast(`${sprava}`, {
        title: 'Upozornenie',
        autoHideDelay: 5000,
        appendToast: pridat,
        solid: true,
        variant: variant,
      })
    },
  },
  computed: {
    aktivnaZalozka() {
      return this.sekciaKopia.hasOwnProperty('oblubene')
          && Array.isArray(this.sekciaKopia.oblubene)
          && this.sekciaKopia.oblubene.length > 0
    },
    skrytZalozku() {
      return Object.keys(this.sekciaKopia).length === 0
    },
  },
  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)
    }
  },
}
</script>

<style scoped></style>