import React, { useState } from "react";
import { Doughnut } from "react-chartjs-2";
import { Chart, ArcElement } from "chart.js";
import { MenuItem, Select, FormControl } from "@mui/material";
import styles from "./ParticipationChart.module.css";

Chart.register(ArcElement);

function participationChart() {
  const [selected, setSelected] = useState("3");
  const [participationRate, setParticipationRate] = useState(89);

  const chartData = {
    labels: ["Progress", "Background"],
    datasets: [
      {
        data: [participationRate, 100 - participationRate],
        backgroundColor: ["#1e60f9ff", "#ffffffff"],
        borderWidth: 0,
        weight: 10,
        cutout: "93%",
        circumference: 360,
        rotation: -90,
      },
    ],
  };

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: { display: false },
      tooltip: { enabled: false },
    },
    animation: {
      animateScale: true,
      animateRotate: true,
    },
  };

  return (
    <div className={`${styles.leftBlock} glassCard`}>
      <div className={styles.participationHeader}>
        <div className={`${styles.partiText} glassCard`}>
          <label htmlFor={styles.months}>Taux de participation depuis :</label>
          <div className={styles.formControl}>
            <FormControl className={styles.formDesign}>
              <Select
                value={selected}
                onChange={(e) => setSelected(e.target.value)}
                sx={{
                  width: "100px",
                  height: "35px",
                  fontSize: "19px",
                  paddingBottom: "-2px",
                  "& .MuiOutlinedInput-notchedOutline": { border: "none" },
                  "& .MuiSelect-select": { padding: "8px", paddingRight: "24px !important" },
                  "& .MuiSvgIcon-root": { fontSize: "20px" },
                }}
                MenuProps={{
                  PaperProps: {
                    sx: {
                      className: "glassCard",
                      borderRadius: "7px",
                      width: "100px",
                      maxWidth: "100px",
                    },
                  },
                }}
                displayEmpty
              >
                <MenuItem value="1" sx={{ fontSize: "18px" }}>1 mois</MenuItem>
                <MenuItem value="3" sx={{ fontSize: "18px" }}>3 mois</MenuItem>
                <MenuItem value="6" sx={{ fontSize: "18px" }}>6 mois</MenuItem>
                <MenuItem value="12" sx={{ fontSize: "18px" }}>12 mois</MenuItem>
              </Select>
            </FormControl>
          </div>
        </div>
      </div>
      <div className={styles.chartContainer}>
        <div className={styles.chartWrapper}>
          <Doughnut data={chartData} options={chartOptions} />
          <div className={styles.chartPercentage}>{participationRate}%</div>
        </div>
      </div>
    </div>
  );
}

export default participationChart;