<script setup lang="ts">
import * as d3 from "d3";
import {useCircleStore} from '@/stores/circle';
import {onMounted} from "vue";
import * as _ from 'underscore'


const props = defineProps<{
  circleData: {
    default: {
      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: 500,
    type: number,
        required: false

  },
  height: {
    default: 500,
    type: number,
    required: false
  },
}>()


function calculatePieData(circle){
        let learningSequences = _.filter(circle.children, (child) => { return child.type === 'learnpath.LearningSequence'; })
        let pieWeights = new Array(Math.max(learningSequences.length, 1)).fill(1)
        let pieGenerator = d3.pie()
        let pieData = pieGenerator(pieWeights)
  console.log(pieData)
        _.forEach(pieData, (pie) => {
          pie.title = learningSequences[parseInt(pie.index)].title
          pie.icon = learningSequences[parseInt(pie.index)].icon
        })
        return pieData
}

onMounted(async () => {



  let pieData = calculatePieData(props.circleData)

  const width = 500,
    height = 500,
    radius = Math.min(width, height) / 3

  const blue900 = '#00224D',
    blue700 = '#1A5197',
    gray100 = '#EDF2F6',
    gray300 = '#E0E5EC',
    gray500 = '#B1C1CA',
    sky400 = '#72CAFF',
    sky500 = '#41B5FA'


  const svg = d3.select('.circle-visualization')
    .attr('width', width)
    .attr('height', height)

  const g = svg.append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')

  // Generate the pie
  const pie = d3.pie()

  // Generate the pie diagram wede
  const wedge = d3
    .arc()
    .innerRadius(radius / 2.5)
    .padAngle(12 / 360)
    .outerRadius(radius)



  // Generate the arrows
  const arrow = d3
    .arc()
    .innerRadius(radius * 1.15)
    .padAngle(30 / 360)
    .outerRadius(radius * 1.16)

    //Generate groups
    const wedgesGroup = g.selectAll('arc').data(pieData).enter().append('g').attr('class', 'arc')
  wedgesGroup.append('path').attr('fill', sky400).attr('d', wedge)


    const learningSequenceText = wedgesGroup
      .append('text')
      .attr('fill', blue900)
      .style('font-size', 15)
      .text((d) => {return d.title})
      .attr("transform", function(d) {
        let translate = wedge.centroid(d)
        translate = [translate[0], translate[1] + 20]
        return "translate(" + translate + ")";  })
      .attr('class', 'circlesText text-xl font-bold')
      .style('text-anchor', 'middle')

  const learningSequenceIcon = wedgesGroup.append("svg:image")
        .attr("xlink:href", (d) => {return "/static/icons/"+d.icon.replace("it-", "")+".svg"})
        .attr("width", 30)
        .attr("height", 30)
        .attr("transform", function(d) {
        let translate = wedge.centroid(d)
        translate = [translate[0]-20, translate[1] - 35]
        return "translate(" + translate + ")";  })


  //Generate groups
  const arrows = g
    .selectAll('arrow')
    .data(pieData)
    .enter()
    .append('g')
    .attr('class', 'arrow')
    .attr('marker-start', 'url(#triangle)')

  const markers = g.selectAll('arrow').attr('transform', 'translate(60, 60) rotate(30)')

  //Draw wedge paths


  //Draw arrow paths
  arrows.append('path').attr('fill', gray300).attr('d', arrow)
}
);


function viewBox() {
  return `0 0 ${width} ${height}`
}


</script>

<style>
.range-input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

input {
  margin-left: 10px;
}
</style>

<template>
  <div class="svg-container h-full content-center">
    <svg class="circle-visualization h-full" :viewBox="viewBox">
    </svg>
  </div>
</template>
