<script setup lang="ts">
import * as log from 'loglevel';
import {computed} from 'vue';
import {useCircleStore} from '@/stores/circle';

log.debug('LearningContent.vue setup');

const circleStore = useCircleStore();

const learningContent = computed(() => circleStore.currentLearningContent);

const block = computed(() => {
  if (learningContent.value) {
    return learningContent.value.contents[0];
  }
})

</script>

<template>
  <div>
    <nav
      class="
        px-4 lg:px-8
        py-4
        flex justify-between items-center
        border-b border-gray-500
      "
    >
      <button
        type="button"
        class="btn-text inline-flex items-center px-3 py-2 font-normal"
        data-cy="close-learnng-content"
        @click="circleStore.closeLearningContent()"
      >
        <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
        <span class="hidden lg:inline">zurück zum Circle</span>
      </button>

      <h1 class="text-xl hidden lg:block">{{ learningContent.title }}</h1>

      <button
        type="button"
        class="btn-blue"
        data-cy="complete-and-continue"
        @click="circleStore.continueFromLearningContent()"
      >
        Abschliessen und weiter
      </button>
    </nav>

    <div v-if="block.type === 'exercise'" class="h-screen">
      <iframe
        width="100%"
        height="100%"
        scrolling="no"
        :src="block.value.url"
      />
    </div>


    <div v-else class="mx-auto max-w-5xl px-4 lg:px-8 py-4">
      <p>{{ block.value.description }}</p>

      <div v-if="block.type === 'video'">
        <iframe
          class="mt-8 w-full aspect-video"
          :src="block.value.url"
          :title="learningContent.title"
          frameborder="0"
          allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
        </iframe>
      </div>

      <div
        v-if="block.type === 'podcast'"
      >
        <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="" :src="block.value.url"></iframe>
      </div>

    </div>

  </div>

</template>

<style lang="scss" scoped>

$header-height: 77px;
$footer-height: 57px;

$content-height: $header-height + $footer-height;

.h-screen {
  height: calc(100vh - $content-height);
}
</style>
