import ValidationModelForm from "./ValidationModelForm";
import SalesModelForm from "./SalesModelForm";
import SubmitModelForm from "./SubmitModelForm";
import { salesModelEnum } from "../../../../enums/salesForms";
import { useStepsModalReseller } from "../../../../Hooks/useStepsModalReseller";

const ModelBody = () => {
  const { handleCloseModel , handleClickOnStep , currentModalIndex} = useStepsModalReseller()

  const Forms = {
    [salesModelEnum.Number]: (
      <ValidationModelForm handleCloseModel={handleCloseModel} />
    ),
    [salesModelEnum.Package]: (
      <SalesModelForm handleCloseModel={handleCloseModel} />
    ),
    [salesModelEnum.Submit]: (
      <SubmitModelForm handleCloseModel={handleCloseModel} />
    ),
  };

  return (
    <>
      {Forms[salesModelEnum.Number]}
      {Forms[salesModelEnum.Package]}
      {Forms[salesModelEnum.Submit]}
      <div className="circle_parent">
        {[...Array(3)].map((_:null,index:number) =><div onClick={() => handleClickOnStep(index)} className={`circle ${currentModalIndex == index  ? "active_circle" :""}`}>{index + 1}</div>)}
      </div>
    </>
  );
};

export default ModelBody;
