import React, { useEffect, useRef } from "react";
import * as d3 from "d3";

const PieChart = () => {
  const data = [
    { departement: "01", value: 21050 },
    { departement: "02", value: 45954 },
    { departement: "03", value: 21584 },
    { departement: "04", value: 53486 },
    { departement: "05", value: 87965 },
    { departement: "06", value: 34864 },
    { departement: "07", value: 48453 },
    { departement: "08", value: 87652 },
    { departement: "09", value: 12346 },
    { departement: "10", value: 78654 },
    { departement: "11", value: 48453 },
    { departement: "12", value: 78654 },
    { departement: "13", value: 28203 },
    { departement: "14", value: 21050 },
    { departement: "15", value: 45211 },
    { departement: "16", value: 87945 },
    { departement: "17", value: 47853 },
    { departement: "18", value: 75213 },
    { departement: "19", value: 21050 },
    { departement: "20", value: 78542 },
    { departement: "21", value: 21050 },
    { departement: "22", value: 78432 },
    { departement: "23", value: 21050 },
    { departement: "24", value: 21050 },
    { departement: "25", value: 27420 },
    { departement: "26", value: 27420 },
    { departement: "27", value: 27420 },
    { departement: "28", value: 27420 },
    { departement: "29", value: 75423 },
    { departement: "30", value: 21050 },
    { departement: "31", value: 78543 },
    { departement: "32", value: 21050 },
    { departement: "33", value: 100 },
    { departement: "34", value: 21050 },
    { departement: "35", value: 21050 },
    { departement: "36", value: 500 },
    { departement: "37", value: 24128 },
    { departement: "38", value: 24128 },
    { departement: "39", value: 2400 },
    { departement: "40", value: 24128 },
    { departement: "41", value: 7856 },
    { departement: "42", value: 2014 },
    { departement: "43", value: 3500 },
    { departement: "44", value: 24128 },
    { departement: "45", value: 2035 },
    { departement: "46", value: 150 },
    { departement: "47", value: 980 },
    { departement: "48", value: 748 },
    { departement: "49", value: 38806 },
    { departement: "50", value: 38806 },
    { departement: "51", value: 78543 },
    { departement: "52", value: 12999 },
    { departement: "53", value: 7865 },
    { departement: "54", value: 12999 },
    { departement: "55", value: 7854 },
    { departement: "56", value: 3698 },
    { departement: "57", value: 7412 },
    { departement: "58", value: 1236 },
    { departement: "59", value: 4789 },
    { departement: "60", value: 8963 },
    { departement: "61", value: 6321 },
    { departement: "62", value: 2145 },
    { departement: "63", value: 3256 },
    { departement: "64", value: 6589 },
    { departement: "65", value: 8965 },
    { departement: "66", value: 4587 },
    { departement: "67", value: 5697 },
    { departement: "68", value: 5413 },
    { departement: "69", value: 9713 },
    { departement: "70", value: 5418 },
    { departement: "71", value: 12999 },
    { departement: "72", value: 8642 },
    { departement: "73", value: 12999 },
    { departement: "74", value: 7319 },
    { departement: "75", value: 8246 },
    { departement: "76", value: 7853 },
    { departement: "77", value: 4687 },
    { departement: "78", value: 2480 },
    { departement: "79", value: 4283 },
    { departement: "80", value: 7352 },
    { departement: "81", value: 2052 },
    { departement: "82", value: 4052 },
    { departement: "83", value: 3058 },
    { departement: "84", value: 5602 },
    { departement: "85", value: 4206 },
    { departement: "86", value: 7069 },
    { departement: "87", value: 7605 },
    { departement: "88", value: 100 },
    { departement: "89", value: 200 },
    { departement: "90", value: 300 },
    { departement: "91", value: 400 },
    { departement: "92", value: 500 },
    { departement: "93", value: 600 },
    { departement: "94", value: 700 },
    { departement: "95", value: 800 },
    { departement: "971", value: 900 },
    { departement: "972", value: 1000 },
    { departement: "973", value: 1000 },
    { departement: "974", value: 1200 },
    { departement: "975", value: 1300 },
  ];

  const chartRef = useRef();

  useEffect(() => {
    // Sélectionne l'élément SVG
    const svg = d3.select(chartRef.current);
    // Supprime tout contenu précédent dans le SVG
    svg.selectAll("*").remove();

    // Définit les marges et dimensions du graphique
    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
    const width = 400 - margin.left - margin.right;
    const height = 400 - margin.top - margin.bottom;
    const radius = Math.min(width, height) / 2;

    // Crée un groupe (g) dans le SVG pour le diagramme circulaire
    const g = svg.append("g")
      .attr("transform", `translate(${width / 2},${height / 2})`);

    // Crée une échelle pour les couleurs
    const color = d3.scaleOrdinal(d3.schemeCategory10);

    // Crée une fonction pour générer les angles du camembert en fonction des données
    const pie = d3.pie()
      .value((d) => d.value);

    // Génère les arcs du camembert
    const arc = d3.arc()
      .outerRadius(radius)
      .innerRadius(0);

    // Ajoute les arcs au groupe (g)
    g.selectAll("arc")
      .data(pie(data))
      .enter().append("path")
      .attr("d", arc)
      .attr("fill", (d, i) => color(i));

    // Ajoute une légende
    const legend = svg.selectAll(".legend")
      .data(pie(data))
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", (d, i) => `translate(0,${i * 20})`);

    legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .attr("fill", (d, i) => color(i));

    legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text((d) => d.data.departement);

  }, [data]);

  return (
    <svg id="pie-chart" width={400} height={400} ref={chartRef}></svg>
  );
};

export default PieChart;