import useHasVerticalScroll from "@/hooks/useHasVerticalScroll";
import CamposPersonalizados from "@/pages/CXESCRM002/kanbanProjeto/campos_personalizados";
import { listarCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { StepLabel, styled } from "@mui/material";
import Box from "@mui/material/Box";
import Step from "@mui/material/Step";
import StepButton from "@mui/material/StepButton";
import StepConnector, {
  stepConnectorClasses,
} from "@mui/material/StepConnector";
import Stepper from "@mui/material/Stepper";
import Image from "next/image";
import {
  Dispatch,
  Fragment,
  ReactNode,
  SetStateAction,
  useEffect,
  useMemo,
  useState,
} from "react";
import { BsFiletypePdf } from "react-icons/bs";
import LoaderGif from "../../public/images/loaders/loader2.gif";
import Button from "../Forms/Button";
interface IStepper {
  children?: ReactNode;
  onStepChange: any;
  onStepCompletion?: any;
  dadosGerados?: boolean;
  edicaoDados?: boolean;
  voltaPdf?: any;
  stepsTotal?: any;
  stepperActiveManagement: boolean;
  setIsLoading: Dispatch<SetStateAction<boolean>>;
  stepsList: any[];
  stepAtual: number;
  form: any;
  dadosCard: any;
  setActiveStep: Dispatch<SetStateAction<number>>;
  activeStep: number;
  handleNext: () => void;
  onValidateStep: any;
}
const StepperEtapa = ({
  children,
  onStepChange,
  onStepCompletion,
  dadosGerados,
  edicaoDados,
  voltaPdf,
  stepsTotal,
  stepperActiveManagement,
  setIsLoading,
  stepsList,
  stepAtual,
  form,
  dadosCard,
  setActiveStep,
  activeStep,
  handleNext,
  onValidateStep,
  // stepsOriginals
}: IStepper) => {
  const [camposPersonalizadosBd, setCamposPersonalizadosBd] = useState<any>([]);
  const [isFinishing, setIsFinishing] = useState(false);
  const [existOnStep, setExistOnStep] = useState(false);
  const { ref: conteudoStepRef } = useHasVerticalScroll<HTMLDivElement>([
    stepAtual,
    activeStep,
  ]);
  const [completed, setCompleted] = useState<{
    [k: number]: boolean;
  }>({});
  const { isSmallDesktop, isMobile } = useScreenContext();

  const classButton =
    "flex bg-stroke border-[1px] max-sm:text-xs border-[#cbced4] bg-primary hover:brightness-90 px-9 h-9 items-center rounded-lg";
  const [steps, setSteps] = useState(stepsList.map((e) => e.nome));
  const stepsOriginals = stepsList.map((e) => e.nome);
  // const stepsOriginals = [
  //   "Dados",
  //   "Kits",
  //   "Estruturas",
  //   "Componentes",
  //   "Markup",
  //   "Observações",
  // ];
  let filteredSteps = [] as any;

  const updateMenuView = () => {
    const windowSize = window.innerWidth;
    if (windowSize < 800) {
      if (activeStep == 0) {
        setSteps(stepsOriginals.slice(0, 3));
      } else if (activeStep == stepsOriginals.length - 1) {
        setSteps(stepsOriginals.slice(-3));
      } else {
        setSteps(stepsOriginals.slice(activeStep - 1, activeStep + 2));
      }
    } else {
      setSteps(stepsOriginals);
    }
  };

  useEffect(() => {
    updateMenuView();
  }, [activeStep, isSmallDesktop]);

  useEffect(() => {
    listarCamposPersonalizados({
      id_coleta: dadosCard?.id_coleta_cliente,
    }).then((res) => {
      setCamposPersonalizadosBd(
        res.filter((a: any) => a.status_campo_personalizado == "1"),
      );
    });
  }, []);
  const camposDoStepAtual = useMemo(() => {
    const stepNome = (stepsList[activeStep]?.nome ?? "").toLowerCase();

    return camposPersonalizadosBd.filter((campo: any) => {
      const descricao = (
        campo.descricao_proposta_personalizado ?? ""
      ).toLowerCase();
      const etapa = (
        campo.etapaProposta_campo_personalizado ?? ""
      ).toLowerCase();

      return (
        campo.local_campo_personalizado === "1" &&
        ((descricao && stepNome.includes(descricao)) ||
          (etapa && stepNome.includes(etapa)))
      );
    });
  }, [activeStep, camposPersonalizadosBd]);
  useEffect(() => {
    const stepNome = (
      stepsList[activeStep]?.nome ??
      stepsList[activeStep]?.name ??
      ""
    ).toLowerCase();

    setExistOnStep(
      camposPersonalizadosBd
        .filter((campo: any) => {
          const descricao = (
            campo.descricao_proposta_personalizado ?? ""
          ).toLowerCase();
          const etapa = (
            campo.etapaProposta_campo_personalizado ?? ""
          ).toLowerCase();
          return (
            campo.local_campo_personalizado === "1" &&
            ((descricao !== "" && stepNome.includes(descricao)) ||
              (etapa !== "" && stepNome.includes(etapa)))
          );
        })
        .some((campo: any) => campo),
    );
  }, [stepAtual, camposPersonalizadosBd]);

  const totalStepsMobile = () => {
    // return stepsOriginals.length;
    return steps.length;
  };
  const totalSteps = () => {
    return stepsOriginals.length;
  };
  useEffect(() => {
    if (edicaoDados) {
      const allCompleted = {} as any;
      steps.forEach((_, index) => {
        allCompleted[index] = true;
      });
      setCompleted(allCompleted);
    }
    if (dadosGerados && activeStep === 0 && stepAtual == 0) {
      handleNext();
    }
    // //(completed);
  }, [dadosGerados]);
  const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
    [`&.${stepConnectorClasses.alternativeLabel}`]: {
      top: 22,
    },
    [`&.${stepConnectorClasses.active}`]: {
      [`& .${stepConnectorClasses.line}`]: {
        backgroundImage:
          "linear-gradient( 95deg,rgb(71,148,250) 0%, rgb(29,120,186) 50%, rgb(60,80,224) 100%)",
      },
    },
    [`&.${stepConnectorClasses.completed}`]: {
      [`& .${stepConnectorClasses.line}`]: {
        backgroundImage:
          "linear-gradient( 95deg,rgb(71,148,250) 0%, rgb(29,120,186) 50%, rgb(60,80,224) 100%)",
      },
    },
    [`& .${stepConnectorClasses.line}`]: {
      height: 3,
      border: 0,
      backgroundColor: "#eaeaf0",
      borderRadius: 1,
      ...theme.applyStyles("dark", {
        backgroundColor: theme.palette.grey[800],
      }),
    },
  }));

  const ColorlibStepIconRoot = styled("div")<{
    ownerState: { completed?: boolean; active?: boolean };
  }>(({ theme }) => ({
    backgroundColor: "#ccc",
    zIndex: 1,
    color: "#fff",
    width: 50,
    height: 50,
    display: "flex",
    borderRadius: "50%",
    justifyContent: "center",
    alignItems: "center",
    ...theme.applyStyles("dark", {
      backgroundColor: theme.palette.grey[700],
    }),
    variants: [
      {
        props: ({ ownerState }) => ownerState.active,
        style: {
          backgroundImage:
            "linear-gradient( 136deg, rgb(71,148,250) 0%, rgb(29,120,186) 50%, rgb(60,80,224) 100%)",
          boxShadow: "0 4px 10px 0 rgba(0,0,0,.25)",
        },
      },
      {
        props: ({ ownerState }) => ownerState.completed,
        style: {
          backgroundImage:
            "linear-gradient( 136deg, rgb(71,148,250) 0%, rgb(29,120,186) 50%, rgb(60,80,224) 100%)",
        },
      },
    ],
  }));
  const completedSteps = () => {
    return Object.keys(completed).length;
  };
  const isLastStepMobile = () => {
    return activeStep === totalStepsMobile() - 1;
  };
  const isLastStep = () => {
    return activeStep === totalSteps() - 1;
  };

  const allStepsCompleted = () => {
    return completedSteps() === totalSteps();
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
    onStepChange(activeStep - 1);
  };

  const handleStep = (step: number) => () => {
    setActiveStep(step);
    onStepChange(step);
  };

  const handleComplete = async () => {
    const isValid = await onValidateStep?.();

    if (!isValid) return; // BLOQUEIA FINALIZAÇÃO
    setIsLoading(true);
    const newCompleted = completed;
    newCompleted[activeStep] = true;
    setCompleted(newCompleted);

    if (onStepCompletion) {
      onStepCompletion(activeStep, true);
    }
    // setIsFinishing(true);
  };

  const handleReset = () => {
    setActiveStep(0);
    setCompleted({});
  };
  // const FuncRotina = stepsList[stepAtual].rotina;
  const StepComponent = stepsList[stepAtual].componente;

  function ColorlibStepIcon(props: any, index: number) {
    const { active, completed, className } = props;

    return (
      <ColorlibStepIconRoot
        ownerState={{ completed, active }}
        className={className}
      >
        {index + 1}
      </ColorlibStepIconRoot>
    );
  }

  // Barra Voltar/Próximo usada no topo e repetida no rodapé das telas com rolagem.
  const renderNavButtons = (wrapperClassName: string) => (
    <div className={`flex w-full justify-between ${wrapperClassName}`}>
      <Button
        type="button"
        className={classButton}
        color="inherit"
        disabled={activeStep === 0}
        onClick={handleBack}
        sx={{ mr: 1 }}
      >
        Voltar
      </Button>
      {isLastStep() ? (
        edicaoDados ? (
          ""
        ) : (
          <Button
            type="button"
            disabled={isFinishing || stepperActiveManagement}
            className={classButton}
            onClick={handleComplete}
          >
            {isFinishing ? (
              <Image width={25} height={25} src={LoaderGif} alt="Logo" />
            ) : (
              "Finalizar"
            )}
          </Button>
        )
      ) : (
        <Button
          disabled={stepperActiveManagement}
          className={classButton}
          type="button"
          onClick={handleNext}
          sx={{ mr: 1 }}
        >
          Próximo
        </Button>
      )}
    </div>
  );

  return (
    <>
      <div
        className={`mt-2 mb-2 md:bg-white overflow-y-hidden rounded-lg ${isMobile ? "overflow-x-auto mt-5" : ""}`}
      >
        <div className="bg-gray-100 p-1 rounded-md">
          <div className={isMobile ? "min-w-[300px]" : ""}>
            <Stepper
              alternativeLabel
              connector={<ColorlibConnector />}
              activeStep={
                // isMobile
                //   ? activeStep == 0
                //     ? activeStep
                //     : activeStep == stepsOriginals.length - 1
                //       ? 2
                //       : 1
                //   :
                activeStep
              }
              // className="mb-2 "
            >
              {stepsOriginals.map((label, index) => {
                return (
                  <Step
                    key={label}
                    completed={
                      stepsOriginals.findIndex((e) => e == label) < activeStep
                    }
                    // style={{
                    //   display: steps.includes(label) ? "block" : "none",
                    // }}
                  >
                    <StepButton
                      onClick={handleStep(index)}
                      style={{
                        margin: "-10px",
                        padding: "10px",
                      }}
                    >
                      <StepLabel
                        StepIconComponent={(e) => ColorlibStepIcon(e, index)}
                        className="text-black !text-xs dark:text-white "
                      >
                        {label}
                      </StepLabel>
                    </StepButton>
                  </Step>
                );
              })}
            </Stepper>
          </div>
        </div>
      </div>

      <div className={`w-full  p-1 px-1`}>
        <Box sx={{ width: "100%" }} className="flex flex-col">
          {edicaoDados && (
            <div className="flex justify-end my-3">
              <Button
                type="button"
                onClick={() => {
                  // voltaPdf(true);
                  handleComplete();
                }}
                className="bg-danger flex text-white items-center gap-2 py-1 px-2 rounded-md text-base"
              >
                Voltar ao PDF <BsFiletypePdf size={20} />
              </Button>
            </div>
          )}
          <Fragment key={activeStep}>
            {/* {children} */}
            {activeStep != 0 && renderNavButtons("pb-2")}
            <div ref={conteudoStepRef} className="w-full">
              <StepComponent
                key={stepAtual}
                {...stepsList[stepAtual].commonProps}
                {...{
                  camposPersonalizados: existOnStep ? (
                    <CamposPersonalizados
                      key={activeStep}
                      dataCard={dadosCard}
                      formulario={form}
                      idLoja={dadosCard.id_loja_coleta}
                      locaisProposta={stepsList}
                      localAtualProposta={activeStep}
                      localCampo="1"
                      tipoNegocio={dadosCard?.tipoNegocio_coleta}
                      showBorderContainer
                    />
                  ) : (
                    <></>
                  ),
                  camposPersonalizadosData: camposDoStepAtual,
                }}
              />
            </div>
          </Fragment>
        </Box>
      </div>
    </>
  );
};
export default StepperEtapa;