<script>
import axios from 'axios';
import * as log from 'loglevel';

import MainNavigationBar from '../components/MainNavigationBar.vue';
import LearningSequence from '../components/circle/LearningSequence.vue';

export default {
  components: { LearningSequence, MainNavigationBar },
  props: ['circleSlug',],
  data() {
    return {
      count: 0,
      circleData: {},
      learningSequences: [],
    }
  },
  mounted() {
    log.debug('CircleView mounted', this.circleSlug);
    axios({
      method: 'get',
      url: `/learnpath/api/circle/${this.circleSlug}/`,
    }).then((response) => {
      log.debug(response.data);
      this.circleData = response.data;

      // aggregate wagtail data into LearningSequence > LearningPackages > LearningUnit hierarchy
      let learningSequence = null;
      let learningPackageIndex = 0;
      this.circleData.children.forEach((child) => {
        if (child.type === 'learnpath.LearningSequence') {
          if (learningSequence) {
            this.learningSequences.push(learningSequence);
          }
          learningSequence = Object.assign(child, { learningPackages: [] });
          learningPackageIndex = 0;
        } else {
          if (learningSequence.learningPackages.length === 0) {
            learningSequence.learningPackages.push({
              title: child.package,
              learningUnits: [],
            })
          }
          if (learningSequence.learningPackages[learningPackageIndex].title !== child.package) {
            learningPackageIndex += 1;
            learningSequence.learningPackages.push({
              title: child.package,
              learningUnits: [],
            })
          }
          learningSequence.learningPackages[learningPackageIndex].learningUnits.push(child);
        }
      });
      this.learningSequences.push(learningSequence);

      // sum minutes
      this.learningSequences.forEach((learningSequence) => {
        learningSequence.minutes = 0;
        learningSequence.learningPackages.forEach((learningPackage) => {
          learningPackage.minutes = 0;
          learningPackage.learningUnits.forEach((learningUnit) => {
            learningPackage.minutes += learningUnit.minutes;
          });
          learningSequence.minutes += learningPackage.minutes;
        });
      });

      log.debug(this.learningSequences);
    });
  }

}
</script>

<template>
  <MainNavigationBar/>

  <div class="circle">
    <div class="flex flex-col lg:flex-row">
      <div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
        <h1 class="text-blue-dark text-7xl">
          {{ circleData.title }}
        </h1>

        <div class="mt-8">
          <img src="@/assets/circle-analyse.svg" alt="">
        </div>

        <div class="outcome 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">
            {{ circleData.description }}
          </div>

          <button class="btn-primary mt-4">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 class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
        <div v-for="learningSequence in learningSequences">
          <LearningSequence :learning-sequence="learningSequence"></LearningSequence>
        </div>

      </div>
    </div>

  </div>
</template>

<style scoped>
</style>
