import LoaderSun from "@/components/common/Loader/LoaderSun";
import { metas } from "@/requests/CRM/Dashboard/listarDashboard";
import { useColorContext } from "@/src/contexts/ColorContext";
import { useAuth } from "@/src/contexts/authContext";
import { getDateTimeBrasil } from "@/utils";
import { ApexOptions } from "apexcharts";
import dynamic from "next/dynamic";
import React, { useEffect, useState } from "react";

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

interface DataProps {
  data?: {
    id_grafico: string;
    nome_grafico: string;
    tipo_grafico: string;
  };
}

const GraficoMetas: React.FC<DataProps> = ({ data }) => {
  const { colorMode } = useColorContext();
  const [periodoSelecionado, setPeriodoSelecionado] = useState("todos");
  const [loading, setLoading] = useState<boolean>(false);

  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const perfil = session.perfil_usuario;

  const [state, setState] = useState<any>({
    series: [],
  });

  const nomeMes = getDateTimeBrasil({
    year: undefined,
    month: "long",
    day: undefined,
    hour: undefined,
    minute: undefined,
    second: undefined,
  });

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

    setLoading(true);

    const response = await metas(id_usuario, perfil);
    const dadosGrafico = response.body.dados_grafico || [];

    handleReset(dadosGrafico);

    setTimeout(() => {
      setPeriodoSelecionado(periodo);
      setLoading(false);
    }, 1000);
  };

  const formatarValor = (valor: number) => {
    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(valor);
  };

  const handleReset = (dadosGrafico: any) => {
    const alcancado = dadosGrafico?.find(
      (item: any) => !isNaN(parseInt(item?.metaTotal || 0))
    )?.metaTotal;
    const definido = dadosGrafico?.find(
      (item: any) => !isNaN(parseInt(item?.metaAlcancada || 0))
    )?.metaAlcancada;

    const porcentagem = (alcancado / definido) * 100;

    const series = [{ name: "Meta", data: [definido, alcancado, porcentagem] }];

    setState({
      series,
    });
  };

  useEffect(() => {
    metas(id_usuario, perfil).then((response) => {
      const dadosGrafico = response.body.dados_grafico || [];
      handleReset(dadosGrafico);
    });
  }, [colorMode]);

  const options: ApexOptions = {
    chart: {
      height: 390,
      type: "bar",
      background: "transparent",
    },
    theme: {
      mode: colorMode == "dark" ? "dark" : "light",
      monochrome: {
        enabled: true,
        color: "#1100ff",
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
      },
    },
    xaxis: {
      categories: [["Previsto"], ["Realizado"], ["Porcentagem"]],
    },
    legend: {
      show: true,
      floating: true,
      fontSize: "16px",
      position: "left",
      offsetX: 160,
      offsetY: 15,
      labels: {
        useSeriesColors: true,
      },
      markers: {},

      formatter: (seriesName, opts) => {
        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex];
      },
      itemMargin: {
        vertical: 3,
      },
    },

    dataLabels: {
      formatter: function (value: any, { dataPointIndex, seriesIndex }) {
        if (seriesIndex === 0 && dataPointIndex === 2) {
          // Verifica se é a série de porcentagem
          return Number(value).toFixed(2) + "%"; // Adiciona o símbolo de porcentagem apenas para essa série
        } else {
          return formatarValor(value); // Retorna outros valores sem alteração
        }
      },
    },
    yaxis: {
      labels: {
        formatter: function (value) {
          return formatarValor(value);
        },
      },
    },

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

  return (
    <div className="bg-white rounded ml-3 p-4 mt-3 w-1/1 dark:bg-boxdark dark:text-white">
      {loading ? (
        <div className="flex justify-center items-center dark:bg-boxdark dark:text-white">
          <LoaderSun />
        </div>
      ) : (
        <>
          <p className="font-semibold">
            {data?.nome_grafico} do mês de {nomeMes}
          </p>

          <ReactApexChart
            options={options}
            series={state.series}
            type="bar"
            height={380}
          />
        </>
      )}
    </div>
  );
};

export default GraficoMetas;