import React, { useEffect, useRef } from "react";

const CircularProgressIndicator = ({ value, color }) => {
  const svgRef = useRef(null);

  useEffect(() => {
    if (!svgRef.current) return;

    // Получаем элемент SVG
    const svg = svgRef.current;
    const circle = svg.querySelector("circle");

    // Рассчитываем длину окружности
    const circumference = circle.getAttribute("r") * 2 * Math.PI;

    // Устанавливаем начальное значение (0%)
    circle.style.strokeDasharray = `${circumference} ${circumference}`;
    circle.style.strokeDashoffset = circumference;

    // Анимируем заполнение
    setTimeout(() => {
      const offset = circumference - (value / 100) * circumference;
      circle.style.transition = "stroke-dashoffset 500ms ease-in-out";
      circle.style.strokeDashoffset = offset;
    }, 0);
  }, [value]);

  console.log(color)
  switch(color){
    case "green":
        color = "#1eeb07"
    break;
    case "red":
        color = "#fc4a03"  
    break;  
    case "yellow":
        color = "#f0fc03"
    break;
    case "orange":
        color = "#ff9f43"  
        break;
  }


  return (
    <div className="relative flex items-center justify-center mt-3">
      {/* SVG для кругового прогресс-бара */}
      <svg
        ref={svgRef}
        className="w-32 h-32"
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="50"
          cy="50"
          r="45"
          fill="transparent"
          stroke={color}
          strokeWidth="7"
          className="fill-gray-200 dark:fill-gray-700"
          strokeDasharray="0 282.74"
          strokeDashoffset="282.74" // Начинаем снизу
          strokeLinecap="round" // Закругляем торцы
          transform="rotate(90 50 50)" // Поворачиваем начало вниз
        />
      </svg>

      {/* Текст в центре круга */}
      <div className="absolute top-[44%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-3xl font-bold" style={{"color":color}}>
        {value}
      </div>
      <div className="absolute top-[65%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-lg text-gray-500 dark:text-gray-400">
        %
      </div>
    </div>
  );
};

export default CircularProgressIndicator;