import React, { useEffect } from "react";
import { getInitialValues, getValidationSchema } from "../formUtil";
import FormPage from "./FormPage";
import PersonalForm from "./PersonalForm";
import ParentDetails from "./ParentDetails";
import ContactDetails from "./ContactDetails";
import AttachmentsDetails from "./AttachmentsDetails";

import { useGetStudent, useUpdateStudent } from "../../../api/student";
import { useNavigate, useParams } from "react-router-dom";
import { Spin } from "antd";
// import useSetPage_title from "../../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../../enums/abilities";

const Update = () => {
  const { mutate, isSuccess, isLoading: updateLoading } = useUpdateStudent();
  const handleSubmit = (values: any) => {
    const Data_To_Send = { ...values };

    Data_To_Send.attachments = [];
    if (Data_To_Send.attachment1) {
      Data_To_Send.attachments.push({
        name: "attachment1",
        file: Data_To_Send.attachment1,
      });
    }

    if (Data_To_Send.attachment2) {
      Data_To_Send.attachments.push({
        name: "attachment2",
        file: Data_To_Send.attachment2,
      });
    }
    // console.log(values?.birthday, "values?.birthday");

    if (values?.birthday) {
      Data_To_Send["birthday"] = values.birthday?.format("YYYY-MM-DD");
    }
    if (typeof values?.image === "string") {
      delete Data_To_Send["image"];
    }
    // console.log(Data_To_Send, "Data_To_Send");

    mutate(Data_To_Send);
  };

  const navigate = useNavigate();
  useEffect(() => {
    if (isSuccess) {
      navigate(-1);
    }
  }, [isSuccess, navigate]);

  const { student_id } = useParams();
  const { data, isLoading } = useGetStudent(
    {
      show: student_id,
    },
    { enabled: !!student_id },
  );
  const userData = data?.data;

  const [t] = useTranslation();
  // useSetPage_title(
  //   `${t(ABILITIES_ENUM?.MAIN_PAGE)}  / ${t(`header.student_card`)} / ${t(`practical.edit`)}`,
  // );

  if (isLoading) {
    return <Spin />;
  }

  return (
    <div className="Edit_Student">
      <FormPage
        initialValues={getInitialValues(userData)}
        validationSchema={getValidationSchema}
        handleSubmit={handleSubmit}
      >
        <div className="AddPage">
          <header>
            {" "}
            {t("header.Modify_student_information")} {userData?.full_name ?? ""}{" "}
          </header>
          <main>
            <header> {t("header.student_details")} </header>

            <main>
              <PersonalForm />
            </main>
          </main>
        </div>
        <div className="AddPage">
          <main>
            <header> {t("header.parent_details")} </header>
            <main>
              <ParentDetails />
            </main>
          </main>
        </div>

        <div className="AddPage">
          <main>
            <header> {t("header.contact_details")} </header>
            <main>
              <ContactDetails />
            </main>
          </main>
        </div>

        <div className="AddPage">
          <main>
            <header> {t("header.additional_details")} </header>
            <main>
              <AttachmentsDetails />
            </main>
          </main>
        </div>
        <div className="SaveDetails">
          <button disabled={updateLoading} type="submit">
            {t("practical.save")}
          </button>
        </div>
      </FormPage>
    </div>
  );
};

export default Update;
