import { Dispatch, SetStateAction, useEffect } from "react";

import dynamic from "next/dynamic";

import { RSIB } from "@/requests/CRUD/Propostas/cadastrarProposta";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { FormatFields, getDateTimeBrasil } from "@/utils";
import { ApexOptions } from "apexcharts";
import { toast } from "react-toastify";
interface ChartState {
  series: Array<{ name: string; data: number[] }>;
}

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

const ResumoColeta = ({
  form,
  dadosCard,
  setIsLoading,
  setShowResumo,
  state,
  setState,
  options,
  setOptions,
  apexOptionsGraficoGeracao,
  setApexOptionsGraficoGeracao,
  apexSeriesGraficoGeracao,
  setApexSeriesGraficoGeracao,
  blockNextStep,
  setRsiProposta,
  setIsLoadedResumo,
  defaultValues,
  inversor,
  camposPersonalizados,
  setNextStepAction
}: {
  setApexOptionsGraficoGeracao: Dispatch<SetStateAction<ApexOptions>>;
  setOptions: Dispatch<SetStateAction<ApexOptions>>;
  [x: string]: any;
}) => {
  const { isMobile } = useScreenContext();
  useEffect(() => {
    if (!setNextStepAction || !form?.trigger) return;

    setNextStepAction(
      () => async () => {
        const values = form.getValues();
        const camposParaValidar = Object.keys(values).filter(
          (key) => !key.endsWith("_cp")
        );
        const isValid = await form.trigger(camposParaValidar);
        return isValid;
      }
    );
  }, []);
  useEffect(() => {
    blockNextStep(true);
    setShowResumo(true);

    const gerarGrafico = async () => {
      const dataForm = form.control._formValues;

      const outrosCustos_Cosip = dataForm.ucs.reduce((acc: number, uc: any) => {
        return (acc += +uc.cosip_uc_coleta + +uc.outros_custos_uc_coleta);
      }, 0);

      const dados = {
        id_concessionaria: dataForm.id_concessionaria_proposta,
        grupo: dataForm.grupo_proposta,
        subgrupo: dataForm.subgrupo_proposta,
        precoTotal_tarifa: dataForm.precoTotal_tarifa,
        fiob_tarifa: dataForm.fiob_tarifa,
        perfil_consumo: dadosCard.perfil_consumo_coleta,
        valor_investimento: +FormatFields.desformatarNumeros(
          dataForm.valorFinalProposta,
        ),
        seguro_rsi_coleta: FormatFields.desformatarNumeros(
          dataForm.seguro_rsi_coleta,
        ),
        geracao_anual: +dataForm.estimativa_geracao * 12,
        classificacao: dadosCard.classificacao_coleta,
        simultaneidade: dadosCard.simultaneidade_coleta,
        cosip: outrosCustos_Cosip,
      };

      await RSIB(dados)
        .then((res: any) => {
          setRsiProposta(res);
          const { payback, tabela_rsi } = res;
          const { years, fluxosCaixa } = tabela_rsi.reduce(
            (
              acc: { years: number[]; fluxosCaixa: number[] },
              yearData: any,
              index: number,
            ) => {
              return {
                years: [
                  ...acc.years,
                  +getDateTimeBrasil({
                    day: undefined,
                    month: undefined,
                    year: "numeric",
                    hour: undefined, // Define a hora como undefined para excluí-la
                    minute: undefined, // Define os minutos como undefined para excluí-los
                    second: undefined, // Define os segundos como undefined para excluí-los
                  }) + index,
                ],
                fluxosCaixa: [...acc.fluxosCaixa, yearData.fluxo_caixa],
              };
            },
            { years: [], fluxosCaixa: [] },
          );

          form.setValue("payback" as never, payback as never);
          form.setValue(
            "tabela_rsi" as never,
            tabela_rsi.map((rsi: any, index: number) => ({
              ...rsi,
              ano:
                +getDateTimeBrasil({
                  day: undefined,
                  month: undefined,
                  year: "numeric",
                  hour: undefined, // Define a hora como undefined para excluí-la
                  minute: undefined, // Define os minutos como undefined para excluí-los
                  second: undefined, // Define os segundos como undefined para excluí-los
                }) + index,
            })) as never,
          );

          const mesesSigla = [
            "JAN",
            "FEV",
            "MAR",
            "ABR",
            "MAI",
            "JUN",
            "JUL",
            "AGO",
            "SET",
            "OUT",
            "NOV",
            "DEZ",
          ];

          setApexOptionsGraficoGeracao({
            chart: {
              id: "GraficoGeracao",
              type: "bar",
              height: 350,
              animations: { enabled: false },
            },
            stroke: {
              width: 1,
              colors: ["#fff"],
            },
            plotOptions: {
              bar: {
                borderRadius: 10,
                dataLabels: {
                  position: "top", // top, center, bottom
                  orientation: "vertical",
                  total: {
                    style: {
                      fontWeight: 800,
                    },
                    offsetY: 10,
                  },
                },
              },
            },
            dataLabels: {
              enabled: true,
              formatter: function (val) {
                return (+FormatFields.desformatarNumeros(val))?.toFixed(0);
              },
              style: {
                fontSize: "14px",
                colors: ["#304758"],
                fontWeight: 700,
              },
              offsetY: 10,
            },
            xaxis: {
              categories: mesesSigla,
              labels: {
                style: {
                  fontSize: isMobile ? "9px" : "20px",
                },
              },
            },
            fill: {
              opacity: 1,
            },
            colors: ["#80c7fd", "#008FFB", "#80f1cb", "#00E396"],
            yaxis: {
              labels: {
                formatter: (val: any) => {
                  return val + "kWh";
                },
                style: {
                  fontSize: isMobile ? "10px" : "20px",
                },
              },
            },
            legend: {
              position: "top",
              horizontalAlign: "center",
            },
          });

          setApexSeriesGraficoGeracao([
            {
              name: "Energia Consumida",
              data: dataForm.media_consumos_ucs_mensal,
            },
            {
              name: "Energia Gerada",
              data: dataForm.estimativa_geracao_mensal,
            },
          ]);

          setOptions({
            chart: {
              id: "LineGraph1",
              type: "bar",
              height: 380,
              animations: { enabled: false },
            },
            plotOptions: {
              bar: {
                colors: {
                  ranges: [
                    {
                      from: -Infinity,
                      to: 0,
                      color: "#F15B46",
                    },
                    {
                      from: 0,
                      to: 9999999,
                      color: "#32b312",
                    },
                  ],
                },
                columnWidth: "90%",
              },
            },
            dataLabels: {
              enabled: false,
              formatter: function (y: number) {
                return (
                  "R$ " +
                  y.toLocaleString("pt-BR", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                );
              },
              style: {
                colors: ["#000"],
                fontSize: isMobile ? "10px" : "20px",
              },
              offsetY: 0.7,
            },
            yaxis: {
              labels: {
                formatter: function (y: number) {
                  return (
                    "R$ " +
                    y.toLocaleString("pt-BR", {
                      minimumFractionDigits: 2,
                      maximumFractionDigits: 2,
                    })
                  );
                },
                style: {
                  fontSize: isMobile ? "10px" : "20px",
                },
                // align: 'left',
                minWidth: 120,
                maxWidth: 200,
                // align: 'center',
              },
            },

            xaxis: {
              categories: years,
              labels: {
                rotate: -45,
                style: {
                  fontSize: isMobile ? "10px" : "20px",
                },
              },
            },
          });
          setState({
            series: [
              {
                name: "Retorno",
                data: fluxosCaixa,
              },
            ],
          });
        })
        .catch((error) => {
          toast.error("Erro ao Calcular o RSI: " + error);
          console.error(error);
          setIsLoading(false);
        });

      const validade_proposta = new Date();
      validade_proposta.setDate(
        validade_proposta.getDate() +
        +defaultValues.tempo_validade_proposta_parametro,
      );
      form.setValue(
        "validade_proposta",
        getDateTimeBrasil(
          {
            year: "numeric",
            hour: undefined, // Define a hora como undefined para excluí-la
            minute: undefined, // Define os minutos como undefined para excluí-los
            second: undefined, // Define os segundos como undefined para excluí-los
          },
          validade_proposta,
        ),
      );

      form.setValue("inversor_proposta", inversor);

      setIsLoadedResumo(true);
      blockNextStep(false);
      // sua função
    };
    gerarGrafico();

    return () => setShowResumo(false);
  }, []);

  //

  return <>{camposPersonalizados}</>;
};

export default ResumoColeta;