import PersonalDetails from "../Form/PersonalDetails";
import TabsBar from "../../../../Layout/Tabs/TabsBar";
import ActiveTabs from "../../../../Layout/Tabs/ActiveTabs";
import { usePage_titleState } from "../../../../../zustand/PageTitleState";
import ParentDetails from "../Form/ParentDetails";
import ContactDetails from "../Form/ContactDetails";
import AttachmentsDetails from "../Form/AttachmentsDetails";
import Successful from "../Form/Successful";
import { useModalState } from "../../../../../zustand/Modal";
import { useFormikContext } from "formik";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

const ModelBody = () => {
  const { title } = usePage_titleState((state) => state);
  const [t] = useTranslation();
  const steps = [
    {
      title: `${t(`practical.Step`)} 1`,
      description: t("header.Student_Information"),
      component: <PersonalDetails />,
    },
    {
      title: `${t(`practical.Step`)} 2`,
      description: t("header.Parent_Information"),
      component: <ParentDetails />,
    },
    {
      title: `${t(`practical.Step`)} 3`,
      description: t("header.Contact_Information"),
      component: <ContactDetails />,
    },
    {
      title: `${t(`practical.Step`)} 4`,
      description: t("header.Attachment_Images"),
      component: <AttachmentsDetails />,
    },
    {
      title: "hidden",
      description: "hidden",
      hidden: true,
      component: <Successful />,
    },
  ];

  const { isOpen } = useModalState((state) => state);
  const formik = useFormikContext();
  useEffect(() => {
    formik.setErrors({});
  }, [isOpen === ""]);

  return (
    <div className="ModelBody">
      <TabsBar steps={steps} />
      <div className="ModelBodyForm">
        <header>
          {" "}
          {t("practical.add")} {t("models.student")}{" "}
          {" " + title === null ? "" : title}{" "}
        </header>
        <ActiveTabs steps={steps} />
      </div>
    </div>
  );
};

export default ModelBody;
