import LoaderSun from "@/components/common/Loader/LoaderSun";
import { useColorContext } from "@/src/contexts/ColorContext";
import { ApexOptions } from "apexcharts";
import dynamic from "next/dynamic";
import { useState } from "react";

const ReactApexChart = dynamic(() => import("react-apexcharts"), {
  ssr: false,
});

const GraficoGeracao = ({ data, usuarios }: any) => {
  // const [series, setSeries] = useState<any[]>([]);
  const meses = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ];
  const mesesSigla = [
    "JAN",
    "FEV",
    "MAR",
    "ABR",
    "MAI",
    "JUN",
    "JUL",
    "AGO",
    "SET",
    "OUT",
    "NOV",
    "DEZ",
  ];

  const series = [
    {
      name: "Energia Consumida",
      data: [44000, 55000, 41000, 67000, 22000, 43000],
    },
    {
      name: "Energia Gerada",
      data: [48000, 50000, 40000, 65000, 25000, 40000],
    },
  ];
  const [groups, setGroups] = useState<any[]>([]);
  const [periodoSelecionado, setPeriodoSelecionado] = useState("mes");

  // const [isLoading, setIsLoading] = useState(true);
  const isLoading = false;

  const { colorMode } = useColorContext();

  // useEffect(() => {
  //   atualizarAtividades();
  // }, []);

  // function atualizarAtividades() {
  //   setIsLoading(true);
  //   listarAtendimentoGrafico(periodoSelecionado)
  //     .then((res: any) => {
  //       res = res.filter((e: any) => e.data_tarefa);
  //       setGroups(res.map((e: any) => e.data_tarefa || "Não definido"));
  //       setSeries([
  //         {
  //           name: "Resolvidos",
  //           data: res.map((e: any) => e.resolvidos),
  //         },
  //         {
  //           name: "Não Resolvidos",
  //           data: res.map((e: any) => e.n_resolvidos),
  //         },
  //         {
  //           name: "Em Aberto",
  //           data: res.map((e: any) => e.em_aberto),
  //         },
  //       ]);
  //     })
  //     .finally(() => {
  //       setIsLoading(false);
  //     });
  // }

  // const handleFilter = async (periodo: string) => {
  //   setPeriodoSelecionado(periodo);
  //   setIsLoading(true);

  //   listarAtendimentoGrafico(periodo)
  //     .then((res: any) => {
  //       setGroups(res.map((e: any) => e.data_tarefa || "Não definido"));
  //       setSeries([
  //         {
  //           name: "Resolvidos",
  //           data: res.map((e: any) => e.resolvidos),
  //         },
  //         {
  //           name: "Não Resolvidos",
  //           data: res.map((e: any) => e.n_resolvidos),
  //         },
  //         {
  //           name: "Em Aberto",
  //           data: res.map((e: any) => e.em_aberto),
  //         },
  //       ]);
  //     })
  //     .finally(() => {
  //       setIsLoading(false);
  //     });
  // };

  const options: ApexOptions = {
    chart: {
      type: "bar",
      height: 350,
    },
    stroke: {
      width: 1,
      colors: ["#fff"],
    },
    dataLabels: {
      enabled: false
    },
    xaxis: {
      categories: mesesSigla,
    },
    fill: {
      opacity: 1,
    },
    colors: ["#80c7fd", "#008FFB", "#80f1cb", "#00E396"],
    yaxis: {
      labels: {
        formatter: (val) => {
          return val / 1000 + "kWh";
        },
      },
    },
    legend: {
      position: "top",
      horizontalAlign: "center",
    },
  };
  // const options: ApexOptions = {
  //   chart: {
  //     type: "bar",
  //     height: 350,
  //     stacked: true,
  //     toolbar: {
  //       show: true,
  //     },
  //     zoom: {
  //       enabled: true,
  //     },
  //     background: "transparent",
  //   },

  //   theme: {
  //     mode: colorMode == "dark" ? "dark" : "light",
  //     monochrome: {
  //       enabled: false,
  //     },
  //   },
  //   responsive: [
  //     {
  //       breakpoint: 480,
  //       options: {
  //         legend: {
  //           position: "bottom",
  //           offsetX: -10,
  //           offsetY: 0,
  //         },
  //       },
  //     },
  //   ],
  //   yaxis: {
  //     labels: {
  //       formatter: (value: any) => {
  //         return value;
  //       },
  //     },
  //   },
  //   plotOptions: {
  //     bar: {
  //       horizontal: false,
  //       // borderRadius: 10,
  //       dataLabels: {
  //         total: {
  //           enabled: true,
  //           style: {
  //             fontSize: "13px",
  //             fontWeight: 900,
  //             color: colorMode == "dark" ? "#fff" : "#000",
  //           },
  //         },
  //       },
  //     },
  //   },
  //   xaxis: {
  //     labels: {
  //       rotate: -45,
  //       trim: true,
  //       hideOverlappingLabels: false,
  //     },
  //     categories: groups,
  //     tickPlacement: "on",
  //   },
  //   legend: {
  //     position: "right",
  //     offsetY: 40,
  //   },
  //   fill: {
  //     opacity: 1,
  //   },
  // };

  return (
    <div className="bg-white rounded ml-3 p-4 mt-3 w-1/1 dark:bg-boxdark dark:text-white">
      <p className="font-semibold">{data.nome_grafico}</p>
      <div className="inline-flexc hidden md:inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
        <button
          className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
            periodoSelecionado === "dia"
              ? "bg-white shadow-card dark:bg-black"
              : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
          }`}
          // onClick={() => handleFilter("dia")}
        >
          Dia
        </button>
        <button
          className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
            periodoSelecionado === "mes"
              ? "bg-white shadow-card dark:bg-black"
              : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
          }`}
          // onClick={() => handleFilter("mes")}
        >
          Mês
        </button>
        <button
          className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
            periodoSelecionado === "ano"
              ? "bg-white shadow-card dark:bg-black"
              : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
          }`}
          // onClick={() => handleFilter("ano")}
        >
          Ano
        </button>
      </div>
      {isLoading ? (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      ) : !series[0].data[0] && !series[1].data[0] ? (
        <div>Não há registros de vendas</div>
      ) : (
        series[0] &&
        series.length > 0 && (
          <ReactApexChart
            options={options}
            series={series}
            type="bar"
            height={350}
          />
        )
      )}
    </div>
  );
};

export default GraficoGeracao;