<template>
  <div :style="{ display: menuObsahuJeSkryte ? 'block' : 'none' }" class="col">
    <div class="netlacitelne pa-0 ma-0 w-100">
      <div class="alert alert-warning my-4">
        <span class="icon-warning mr-1"></span>
        Obsah učebného materiálu nie je povolené tlačiť...
      </div>
    </div>
    <div class="nahlad-ucebneho-textu">
      <div v-if="jeSekcia" class="sekcia-obsah m-0 p-0">
        <h2 class="py-2">{{ sekcia.nazov }}</h2>
        <div
            ref="obsah"
            class="obsah"
            unselectable="on"
            :style="{ fontSize: velkostPisma + 'em', lineHeight: velkostPisma + 0.2 + 'em' }"
            @keydown.ctrl.65.prevent.stop
            @keydown.ctrl.67.prevent.stop
            @keydown.meta.65.prevent.stop
            @keydown.meta.67.prevent.stop
            @contextmenu.stop.prevent
            @mousedown.stop.prevent
            @dragstart.stop.prevent
        >
          <div class="pa-0 ma-0 d-block bg-transparent position-absolute" style="width:100%;height:100%;"></div>
          <div v-html="sekcia.obsah" class="pa-0 ma-0"></div>
        </div>
      </div>
      <div v-else class="row">
        <div v-if="maObrazok" class="col-sm-12 col-md-4">
          <img :alt="ucebnyMaterial.nazov" :src="ucebnyMaterial.obrazok" class="ucebny-material-obrazok">
        </div>
        <div :class="{'col-md-8' : maObrazok}" class="col-sm-12">
          <div :style="{ fontSize: velkostPisma + 'em !important' }" class="ucebny-material-popis">
            {{ ucebnyMaterial.popis }}
          </div>
        </div>
      </div>
    </div>
    <hr class="py-1">
    <navigacia-component
        :navigacia="navigacia"
        :sekcia="sekcia"
    ></navigacia-component>
  </div>
</template>

<script>
import NavigaciaComponent from './Navigacia'

export default {
  name: 'ObsahComponent',
  components: {
    NavigaciaComponent,
  },
  props: {
    sekcia: {
      type: Object,
      default: function () {
        return {}
      },
    },
    navigacia: {
      type: Object,
      default: function () {
        return {
          predchadzajuca: {
            nazov: null,
            url: null,
          },
          rodic: {
            nazov: null,
            url: null,
          },
          nasledujuca: {
            nazov: null,
            url: null,
          },
        }
      },
    },
    ucebnyMaterial: {
      type: Object,
      default: function () {
        return {
          nazov: null,
        }
      },
    },
    menuObsahuJeSkryte: {
      required: true,
      type: Boolean,
      default: true,
    },
    velkostPisma: {
      required: true,
      type: Number,
      default: 1.2,
    },
  },
  computed: {
    jeSekcia() {
      return !!Object.values(this.sekcia).length
    },
    maObrazok() {
      return !!this.ucebnyMaterial.obrazok
    },
  },
}
</script>

<style scoped type="text/css">
.nahlad-ucebneho-textu {
  display: block;
}

.sekcia-obsah, .ucebny-material-popis {
  font-size: 1.2em;
  line-height: 1.2em !important;
  border: 0 !important;
  font-family: 'sans-serif' !important;
  vertical-align: baseline !important;
  list-style: circle !important;
}

.ucebny-material-obrazok {
  max-width: 100%;
}

.sekcia-obsah .obsah {
  font-size: 1.0em;
  line-height: 1.3em;
  user-select: none;
}

.sekcia-obsah .obsah p > img {
  height: 20em;
  width: auto;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.sekcia-obsah .obsah h1 {
  font-size: 1.5em !important;
  line-height: 1.7em !important;
}

.sekcia-obsah .obsah h2 {
  font-size: 1.4em !important;
  line-height: 1.6em !important;
}

.sekcia-obsah .obsah h3 {
  font-size: 1.3em !important;
  line-height: 1.5em !important;
}

.sekcia-obsah .obsah h4 {
  font-size: 1.2em !important;
  line-height: 1.4em !important;
}

.sekcia-obsah .obsah h5 {
  font-size: 1.1em !important;
  line-height: 1.3em !important;
}

.netlacitelne {
  display: none;
}

@media only print {
  .nahlad-ucebneho-textu {
    display: none !important;
  }

  .netlacitelne {
    display: inline-block;
    width: 100%
  }
}
</style>
