"use client"
import React, { useEffect, useState } from "react"
import { Doughnut } from "react-chartjs-2"
import { Chart as ChartJS, ArcElement, Tooltip, Legend, ChartOptions } from "chart.js"
import { sum } from "lodash"
import { useTranslations } from "next-intl"

ChartJS.register(ArcElement, Tooltip, Legend)

const options: ChartOptions<any> = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
    },
  },
  maintainAspectRatio: false,
}

interface IProps {
  data?: {
    labels: Array<any>
    datasets: Array<any>
  }
} 

export default function DoughnutChart({ data }: IProps) {
  const trans = useTranslations("dashboard")

  const [dataChart, setDataChart] = useState<any>({
    labels: [],
    datasets: [
      {
        data: [],
        backgroundColor: ["#1F8BDE", "#40E71B", "#EB2121", "#374151", "#DB9A1D", "#9D00E6", "00D5CE"],
        borderWidth: 0,
        circumference: 180,
        rotation: 270,
        borderRadius: 50,
        cutout: "95%",
        spacing: 10,
      },
    ],
  })

  const categoriesColor = ["bg-blue-500", "bg-green-500", "bg-red-500", "bg-gray-700", "bg-yellow-500", "bg-purple-500", "bg-teal-500"]

  useEffect(() => {
    if (data) {
      setDataChart(data)
    }
  }, [data])

  return (
    <>
      <div className="relative">
        <div className="relative">
          <div className="w-full overflow-y-hidden overflow-x-auto">
            <Doughnut
              data={dataChart}
              options={options}
              redraw={true}
              height={400}
            />
          </div>
          <div className="absolute text-center top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/4">
            <img
              src="/img/icon/gril_user.svg"
              alt="Memory Usage"
              className="w-[120px] h-[120px]"
            />
            <p className="text-xl md:text-2xl lg:text-3xl xl:text-5xl font-medium text-[var(--secondary-50)]">
              <span className="font-bold text-[var(--secondary-100)] text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
                {sum(dataChart.datasets[0].data || [])}
              </span>{" "}
              Mb
            </p>
            <p className="text-lg lg:text-xl xl:text-2xl text-[var(--secondary-50)]">{trans("total_usage")}</p>
          </div>
        </div>
      </div>
      {dataChart.labels.length > 0 && (
        <div className="space-y-4 p-4">
          <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 xl:flex xl:flex-wrap xl:items-center xl:justify-center">
            {categoriesColor.map((item, index) => (
              <div
                key={index}
                className="flex flex-col bg-gray-100 rounded-lg shadow-md p-4 xl:basis-1/5">
                <div className="flex items-center mb-2.5">
                  <div className={`w-6 h-6 ${item} rounded-md mr-2`}></div>
                  <p className="text-sm font-semibold text-gray-600">{dataChart.labels[index] || ""}</p>
                </div>
                <div>
                  <p className="text-5xl font-bold text-black">
                    {dataChart.datasets[0].data[index] || 0}
                    <span className="text-3xl font-medium text-[var(--secondary-50)] ml-1">Mb</span>
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </>
  )
}