<script lang="ts">
  // DEMO: Just something colourful to show in view, representing actual data.
  import { dossierData } from "../stores/dossierstore";
  import * as d3 from "d3";

  let svg: SVGSVGElement;
  let width = 200;
  let height = 200;
  let radius = Math.min(width, height) / 2;

  $: pieData = Object.entries($dossierData)
    .filter(([collection]) => collection !== "documentReferences")
    .map(([collection, items]) => ({
      label: collection,
      value: items.length,
    }))
    .filter((d) => d.value > 0);

  $: {
    if (pieData.length > 0) {
      const color = d3.scaleOrdinal(d3.schemeCategory10);

      const pie = d3.pie().value((d) => d.value);
      const arc = d3.arc().innerRadius(0).outerRadius(radius);

      const pieChart = d3
        .select(svg)
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${width / 2}, ${height / 2})`);

      const arcs = pieChart
        .selectAll("arc")
        .data(pie(pieData))
        .enter()
        .append("g")
        .attr("class", "arc");

      arcs
        .append("path")
        .attr("d", arc)
        .attr("fill", (d) => color(d.data.label));

      arcs
        .append("text")
        .attr("transform", (d) => `translate(${arc.centroid(d)})`)
        .attr("text-anchor", "middle")
        .text((d) => translateToDutch(d.data.label));
    }
  }

  const translateToDutch = (collection: string) => {
    switch (collection) {
      case "allergyIntolerances":
        return "Allergieën";
      case "conditions":
        return "Aandoeningen";
      case "documentReferences":
        return "Documenten";
      case "immunizations":
        return "Vaccinaties";
      case "medicationRequests":
        return "Medicatieverzoeken";
      case "medicationDispenses":
        return "Toedieningen";
      case "observations":
        return "Metingen";
      case "organizations":
        return "Zorgaanbieders";
      case "patients":
        return "Patiëntgegevens";
      case "practitioners":
        return "Zorgverleners";
      case "procedures":
        return "Procedures";
      default:
        return collection;
    }
  };
</script>

<svg bind:this={svg}></svg>
