<template>
    <section class="space-sm pb-4" :class="[ kontrast ? 'bg-dark' : 'bg-white' ]">
        <div class="container" 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
                        :sekcia="sekcia"
                        :velkost-pisma="velkostPisma"
                        :ucebny-material="ucebnyMaterial"
                        :menu-obsahu-je-skryte="menuObsahuSkryte"
                ></obsah-component>
            </div>
        </div>
    </section>
</template>

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

  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 []
        },
      },
    },
    data () {
      return {
        sekciaKopia: Object.assign(this.sekcia),
        kontrast: false,
        velkostPisma: 20,
        menuObsahuSkryte: true,
        apiPoziadavkaAktivna: false,
      }
    },
    methods: {
      zobrazitObsah () {
        this.menuObsahuSkryte = !this.menuObsahuSkryte
      },
      textZmensit () {
        const min = 8
        const velkost = this.velkostPisma - 4

        this.velkostPisma = velkost >= min ? velkost : min
      },
      textZvacsit () {
        const max = 40
        const velkost = this.velkostPisma + 4

        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].id}`)
        } else {
          request = window.axios.post(
            'oblubene',
            {
              typ: 'MODEL_TYPE_SEKCIA',
              id: this.sekciaKopia.id
            }
          )
        }

        try {
          this.apiPoziadavkaAktivna = true
          await request.then(function (response) {
            if (response.config.method === 'post') {
              that.sekciaKopia.oblubene = [response.data.data]
            } else {
              that.sekciaKopia.oblubene = []
            }
          }).catch(function (error) {
            console.error(error)
            alert('Záložka nebola vytvorená.')
          })
        } catch (error) {
          console.error(error)
          alert('Chyba pri práci so záložkou.')
        } finally {
          this.apiPoziadavkaAktivna = false
        }
      },
      zmenitKontrast () {
        this.kontrast = !this.kontrast
      },
    },
    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'))
        this.velkostPisma = JSON.parse(localStorage.getItem('nastavenia.zobrazenie.velkostPisma'))
      }
    }
  }
</script>

<style scoped>

</style>