<template>
  <nav class="row navbar navbar-expand-lg justify-content-between align-items-center border-light border-bottom"
       :class="[ kontrastJeAktivny ? 'bg-dark' : 'bg-white' ]" ref="navbar">
    <div class="col-1 col-lg order-lg-1">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" @click="$emit('zobrazitObsah')" title="Obsah učebného materiálu">
            <i class="icon-menu fa-2x" :class="{ 'text-blue' : !menuObsahuJeSkryte }"></i>
          </a>
        </li>
      </ul>
    </div>
    <div class="col-8 col-lg-auto order-lg-2 d-flex">
      <h2 class="font-weight-bolder text-truncate" title="Názov učebného materiálu">{{ ucebnyMaterial.nazov }}</h2>
    </div>
    <div class="col-3 col-lg order-lg-3">
      <ul class="navbar-nav float-right" style="flex-direction: row !important;">
        <li class="nav-item">
          <a class="nav-link" @click="$emit('textZmensit')" title="Zmenšiť text">
            <i class="icon-minus-circled fa-2x"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" @click="$emit('textZvacsit')" title="Zväčšiť text">
            <i class="icon-plus-circled fa-2x"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" @click="$emit('zmenitKontrast')" title="Kontrastný režim">
            <i class="icon-adjust fa-2x" :class="{ 'text-blue' : kontrastJeAktivny }"></i>
          </a>
        </li>
        <li class="nav-item" :class="{ 'text-hide' : zalozkaJeSkryta }">
          <a class="nav-link" @click="$emit('zmenitZalozku')" title="Založiť záložku">
            <i class="icon-bookmark fa-2x" :class="{ 'text-blue' : zalozkaJeAktivna }"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'HlavickaComponent',
  props: {
    ucebnyMaterial: {
      required: true,
      type: Object,
      default: function () {
        return {
          nazov: 'Nazov testovaci',
        }
      },
    },
    menuObsahuJeSkryte: {
      required: true,
      type: Boolean,
      default: false,
    },
    kontrastJeAktivny: {
      required: true,
      type: Boolean,
      default: false,
    },
    zalozkaJeSkryta: {
      type: Boolean,
      default: true,
    },
    zalozkaJeAktivna: {
      required: true,
      type: Boolean,
      default: false,
    },
  },
  created() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll(event) {
      const navbar = this.$refs.navbar

      if (window.pageYOffset >= navbar.offsetTop) {
        navbar.classList.add('sticky')
        navbar.classList.add('box-shadow')
        navbar.classList.add('border-0')

        return
      }

      navbar.classList.remove('sticky')
      navbar.classList.remove('box-shadow')
      navbar.classList.remove('border-0')
    },
  },
}
</script>

<style type="text/css">
.sticky {
  position: sticky;
  top: 60px;
  z-index: 1;
}
</style>