import { useFormikContext } from "formik"
import { useEffect, useState } from "react"
import { useObjectToEdit } from "../zustand/ObjectToEditState";
import { useModalState } from "../zustand/Modal";
import { useQueryClient } from "react-query";

export const useStepsModalReseller = () =>{

  const { setObjectToEdit } = useObjectToEdit();
  const formik = useFormikContext<any>();
  const { setIsOpen } = useModalState((state) => state);
  const queryClient = useQueryClient();
  const [biggestModalIndex,setBiggestModalIndex] = useState(0)
  const currentModalIndex = formik?.values?.currentModalIndex 


  useEffect(()=>{
    const modalIndex = formik?.values?.currentModalIndex
    modalIndex > biggestModalIndex && setBiggestModalIndex(modalIndex)
  },[formik?.values?.currentModalIndex])

    const handleCloseModel = () => {
    formik?.resetForm();
    setIsOpen("");
    formik?.setFieldValue("currentModalIndex", 0);
    setObjectToEdit({});
    queryClient.resetQueries();
    setBiggestModalIndex(0)
  };


    const handleClickOnStep = (index:number) =>{
    if(index > biggestModalIndex)return
    formik?.setFieldValue("currentModalIndex", index);
  }
  return {handleCloseModel , handleClickOnStep , currentModalIndex}
}