import { useColorContext } from "@/src/contexts/ColorContext";
import { ApexOptions } from "apexcharts";
import dynamic from "next/dynamic";
const ReactApexChart = dynamic(() => import("react-apexcharts"), {
  ssr: false,
});

const AmazonStorageChart = ({ usadoAmazon, totalAmazon }: any) => {
  const percentUsed = (usadoAmazon / totalAmazon) * 100 || 0;
  const percentAvailable = totalAmazon * 100;
  const state = [percentAvailable, percentUsed];

  const { colorMode } = useColorContext();

  const options: ApexOptions = {
    chart: {
      height: 290,
      width: 390,
      type: "donut",
    },

    plotOptions: {
      pie: {
        donut: {
          size: "50px",
          labels: {
            show: true,
            total: {
              show: true,
              showAlways: true,
              formatter: () => "5 GB",
              fontWeight: 900,
              fontFamily: "Satoshi",
              color: colorMode == "dark" ? "#fff" : "#000",
            },
            value: {
              color: colorMode == "dark" ? "#fff" : "#000",
            },
          },
        },
      },
    },

    colors: ["#3C50E0", "#f79420"],
    labels: ["Disponível", "Utilizado"],
    tooltip: {
      style: {
        fontFamily: "Satoshi",
      },
    },
    dataLabels: {
      style: {
        fontFamily: "Satoshi",
      },
    },
    legend: {
      show: false,
    },

    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            show: false,
          },
        },
      },
    ],
  };

  return (
    <ReactApexChart
      width={200}
      options={options}
      series={state}
      type="donut"
      height={200}
    />
  );
};

export default AmazonStorageChart;