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

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


export default {


  components: {MainNavigationBar, LearningPathDiagram},
  props: ['learningPathSlug',],
  data() {
    return {
      count: 0,
      learningPathData: {},
      learningPathContents: null,
      circles: [],
      learningSequences: [],
    }
  },
  mounted() {
    log.debug('LearningPath mounted', this.learningPathSlug);
    axios({
      method: 'get',
      url: `/learnpath/api/learningpath/${this.learningPathSlug}/`,
    }).then((response) => {

      this.learningPathData = response.data

      let learningPathContents = {topics: []}
      let topic = {
        id: 0,
        title: '',
        slug: '',
        type: 'learnpath.Topic',
        translation_key: '',
        is_visible: false,
        cirlces: []
      }
      response.data.children.forEach((child) => {
        if (child.type === 'learnpath.Topic') {
          if (topic.id != 0) {
            learningPathContents.topics.push(child)
          }
          topic = child
          topic.circles = []
        }
        if (child.type === 'learnpath.Circle') {
          topic.circles.push(child)
        }
      });
      learningPathContents.topics.push(topic)
      this.learningPathContents = learningPathContents;

    });

  }
}


</script>

<template>
  <div class="bg-gray-300 h-screen" v-if="learningPathContents">


    <MainNavigationBar/>

    <div class="learningpath flex flex-col">
      <div class="flex flex-col h-max">
        <div class="bg-white h-80 pt-8">
          <LearningPathDiagram :learning-path-contents="learningPathContents"></LearningPathDiagram>
        </div>

        <div class="text-blue-dark font-bold text-7xl m-12">
          {{ learningPathData.title }}
        </div>

        <div class="bg-white m-12  p-8 flex flex-row  justify-start">
          <div class="p-8">

            <h2>Willkommmen zurück, Jan</h2>
            Du hast bereits drei circles bearbeitet, mach weiter so!
          </div>
          <div class="p-8  border-l ">Nächster Schirtt
            <h3>Analyse: Anwenden</h3>
            <button class="btn-blue mt-4">
              Los geht's
            </button>
          </div>

        </div>
        <div class="topic"></div>


      </div>


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

<style scoped>
</style>
