<script setup lang="ts">
import * as log from 'loglevel';
import LearningSequence from '@/components/circle/LearningSequence.vue';
import CircleOverview from '@/components/circle/CircleOverview.vue';
import CircleDiagram from '@/components/circle/CircleDiagram.vue';
import LearningContent from '@/components/circle/LearningContent.vue';

import {onMounted} from 'vue'
import {useCircleStore} from '@/stores/circle';
import SelfEvaluation from '@/components/circle/SelfEvaluation.vue';

log.debug('CircleView.vue created');

const props = defineProps<{
  circleSlug: string
}>()

const circleStore = useCircleStore();
circleStore.loadCircle(props.circleSlug);

onMounted(async () => {
  log.info('CircleView.vue mounted');
});

</script>

<template>
  <Transition mode="out-in">
    <div v-if="circleStore.page === 'OVERVIEW'">
      <CircleOverview :circle="circleStore.circle" @close="circleStore.page = 'INDEX'"/>
    </div>
    <div v-else-if="circleStore.page === 'LEARNING_CONTENT'">
      <LearningContent :key="circleStore.currentLearningContent.translation_key"/>
    </div>
    <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
      <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key"/>
    </div>
    <div v-else>
      <div class="circle">
        <div class="flex flex-col lg:flex-row">
          <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:py-8">
            <h1 class="text-blue-dark text-7xl">
              {{ circleStore.circle?.title }}
            </h1>

            <div class="w-full mt-8">
              <CircleDiagram></CircleDiagram>
            </div>

            <div class="border-t-2 border-gray-500 mt-4 lg:hidden">
              <div
                class="mt-4 inline-flex items-center"
                @click="circleStore.page = 'OVERVIEW'"
              >
                <it-icon-info class="mr-2"/>
                Das lernst du in diesem Circle
              </div>
              <div class="inline-flex items-center">
                <it-icon-message class="mr-2"/>
                Fachexpertin kontaktieren
              </div>
            </div>

            <div class="hidden lg:block">
              <div class="block border border-gray-500 mt-8 p-6">
                <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
                <div class="prose mt-4">
                  {{ circleStore.circle?.description }}
                </div>

                <button class="btn-primary mt-4" @click="circleStore.page = 'OVERVIEW'">Erfahre mehr dazu</button>
              </div>

              <div class="expert border border-gray-500 mt-8 p-6">
                <h3 class="text-blue-dark">Hast du Fragen?</h3>
                <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
                <button class="btn-secondary mt-4">
                  Fachexpertin kontaktieren
                </button>
              </div>
            </div>
          </div>

          <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
            <div
              v-for="learningSequence in circleStore.circle?.learningSequences || []"
              :key="learningSequence.translation_key"
            >
              <LearningSequence
                :learning-sequence="learningSequence"
              ></LearningSequence>
            </div>

          </div>
        </div>

      </div>
    </div>
  </Transition>
</template>

<style scoped>

.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

</style>
