<script>
import * as d3 from 'd3';
import { useLearningPathStore } from '../../stores/learningPath';

export default {
  props: {
    learningPathContents: {
      default: {
        topics: [
          {
            id: 4,
            title: 'Basissdf',
            slug: 'basissdf',
            type: 'learnpath.Topic',
            translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
            is_visible: false,
            circles: [
              {
                id: 5,
                title: 'Basis',
                slug: 'basis',
                type: 'learnpath.Circle',
                translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
                learning_sequences: [
                  {
                    id: 11,
                    title: 'Starten',
                    done: false,
                  },
                  {
                    id: 13,
                    title: 'Beobachten',
                    done: false,
                  },
                ],
              },
            ],
          },
          // {
          //   id: 6,
          //   title: 'Gewinnen von Kunden',
          //   slug: 'gewinnen-von-kunden',
          //   type: 'learnpath.Topic',
          //   translation_key: 'e3a9a61e-2c60-4363-a4a8-d4ef4d4ff466',
          //   is_visible: true,
          //   circles: [
          //     {
          //       id: 7,
          //       title: 'Gewinnen',
          //       slug: 'gewinnen',
          //       type: 'learnpath.Circle',
          //       translation_key: '23b689c9-8800-4783-9842-725ee5f3a3f1',
          //       learning_sequences: [
          //         {
          //           id: 11,
          //           title: 'Starten',
          //           done: true,
          //         },
          //         {
          //           id: 13,
          //           title: 'Beobachten',
          //           done: false,
          //         },
          //         {
          //           id: 11,
          //           title: 'Starten',
          //           done: false,
          //         },
          //         {
          //           id: 13,
          //           title: 'Beobachten',
          //           done: false,
          //         },
          //         {
          //           id: 11,
          //           title: 'Starten',
          //           done: true,
          //         },
          //         {
          //           id: 13,
          //           title: 'Beobachten',
          //           done: false,
          //         },
          //       ],
          //     },
          //   ],
          // },
          // {
          //   id: 8,
          //   title: 'Beraten der Kunden',
          //   slug: 'beraten-der-kunden',
          //   type: 'learnpath.Topic',
          //   translation_key: '66fdc053-68ee-4e53-b8e3-3b3816c4f8f4',
          //   is_visible: true,
          //   circles: [
          //     {
          //       id: 9,
          //       title: 'Einstieg',
          //       slug: 'einstieg',
          //       type: 'learnpath.Circle',
          //       translation_key: 'a608ce8c-1482-491d-becd-2280787285b3',
          //       learning_sequences: [
          //         {
          //           id: 11,
          //           title: 'Starten',
          //           done: true,
          //         },
          //         {
          //           id: 13,
          //           title: 'Beobachten',
          //           done: false,
          //         },
          //       ],
          //     },
          //     {
          //       id: 10,
          //       title: 'Analyse des letzten Falles',
          //       slug: 'analyse',
          //       type: 'learnpath.Circle',
          //       translation_key: '2ca5ba7a-98b8-4511-ba50-bc190714886d',
          //       learning_sequences: [
          //         {
          //           id: 11,
          //           title: 'Starten',
          //           done: true,
          //         },
          //         {
          //           id: 13,
          //           title: 'Beobachten',
          //           done: true,
          //         },
          //         {
          //           id: 18,
          //           title: 'Anwenden',
          //           done: true,
          //         },
          //         {
          //           id: 30,
          //           title: 'Üben',
          //           done: false,
          //         },
          //       ],
          //     },
          //   ],
          // },
        ],
      },
      type: Object,
    },

    width: {
      default: 1440,
      type: Number,
    },
    height: {
      default: 256,
      type: Number,
    },
  },
  setup() {
    const learningPathStore = useLearningPathStore()

    return { learningPathStore }
  },
  computed: {
    viewBox() {
      return `0 0 ${this.width} ${this.height* 1.5}`
    },
    circles() {
      if (this.learningPathStore.learningPath) {
        let internalCircles = this.learningPathStore.learningPath.topics.flatMap(topic => topic.circles);
        // console.log(internalCircles);
        internalCircles.forEach((circle) => {
          let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
          let pieGenerator = d3.pie()
          let pieData = pieGenerator(pieWeights)
          // _.forEach(pieData, function(pie) {
          //   pie.done = circle.learning_sequences.length === 0 ? false : circle.learning_sequences[parseInt(pie.index)].done
          // })
          circle.pieData = pieData
        });
        return internalCircles
      }
      return [];
    },
    svg() {
      return d3.select('.learning-path-visualization')

    },

  },

  mounted() {
    const circleWidth = 200
    const radius = (circleWidth * 0.8) / 2
    const blue900 = '#00224D',
      blue700 = '#1A5197',
      gray100 = '#EDF2F6',
      gray300 = '#E0E5EC',
      gray500 = '#B1C1CA',
      sky400 = '#72CAFF',
      sky500 = '#41B5FA'

    let vueRouter =  this.$router

    // Create append pie charts to the main svg
    const circle_groups = this.svg
      .selectAll('.circle')
      .data(this.circles)
      .enter()
      .append('g')
      .attr('class', 'circle')
      .attr('transform', (d, i) => {
        let x_coord = (i + 1) * circleWidth - radius
        return 'translate(' + x_coord + ', 200)'
      })
      .on('mouseover', function (d, i) {
        d3.select(this)
          .selectAll('.learningSegmentArc')
          .transition()
          .duration('200')
          .attr('fill', (d) => {
            return d.done ? sky400 : gray100
          })
      })
      .on('mouseout', function (d, i) {
        d3.select(this)
          .selectAll('.learningSegmentArc')
          .transition()
          .duration('200')
          .attr('fill', (d) => {
            return d.done ? sky500 : gray300
          })
      })
      .on('click', function (d, i) {
        vueRouter.push('/circle/'+i.slug)
      })

      .attr('role', 'button')

    const arcGenerator = d3
      .arc()
      .innerRadius(radius / 2)
      .padAngle(12 / 360)
      .outerRadius(radius)

    //Generate groups
    const arcs = this.svg
      .selectAll('g')
      .selectAll('.learningSegmentArc')
      .data((d) => {
        return d.pieData
      })
      .enter()
      .append('g')
      .attr('class', 'learningSegmentArc')
      .attr('fill', gray300)

    arcs
      .transition()
      .duration('1000')
      .attr('fill', (d) => {
        return d.done ? sky500 : gray300
      })

    //Draw arc paths
    arcs.append('path').attr('d', arcGenerator)

    const circlesText = circle_groups
      .append('text')
      .attr('fill', blue900)
      .style('font-size', 19)
      .text((d) => d.title)
      .attr('y', radius + 30)
      .attr('class', 'circlesText text-xl font-bold')
      .style('text-anchor', 'middle')
      .call(wrap, 200 - 20)

    const topicTitles = this.svg
      .selectAll('.topicTitles')
      .data(this.learningPathContents.topics)
      .enter()
      .append('text')
      .attr('x', (d, i) => {
        return i * circleWidth * d.circles.length + 50
      })
      .attr('y', 50)
      .attr('fill', blue900)
      .style('font-size', 19)
      .text((d) => d.title)
      .attr('class', 'topicTitles font-bold')

    const topicLines = this.svg
      .selectAll('lines')
      .data(this.learningPathContents.topics)
      .enter()
      .append('line')
      .attr('x1', (d, i) => {
        return i * circleWidth * d.circles.length + 30
      })
      .attr('y1', 10)
      .attr('x2', (d, i) => {
        return i * circleWidth * d.circles.length + 30
      })
      .attr('y2', 0)
      .attr('class', 'stroke-gray-500')
      .attr('stroke-width', 1.76)

    topicLines.transition().duration('1000').attr('y2', 350)

    function wrap(text, width) {
      text.each(function () {
        let text = d3.select(this),
          words = text.text().split(/\s+/).reverse(),
          word,
          line = [],
          lineNumber = 0,
          lineHeight = 1.1, // ems
          y = text.attr('y'),
          dy = 0, //parseFloat(text.attr('dy')),
          tspan = text
            .text(null)
            .append('tspan')
            .attr('x', 0)
            .attr('y', y)
            .attr('dy', dy + 'em')
        while ((word = words.pop())) {
          line.push(word)
          tspan.text(line.join(' '))
          if (tspan.node().getComputedTextLength() > width) {
            line.pop()
            tspan.text(line.join(' '))
            line = [word]

            tspan = text
              .append('tspan')
              .attr('x', 0)
              .attr('y', y)
              .attr('dy', ++lineNumber * lineHeight + dy + 'em')
              .text(word)
          }
        }
      })
    }
  },
}
</script>


<template>
  <div class="svg-container h-full content-start">
    <svg class="learning-path-visualization h-full" :viewBox="viewBox">
    </svg>
  </div>

</template>
