import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../../enums/Model";
import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
import { QueryStatusEnum } from "../../../../enums/QueryStatus";
import ModelForm from "./ModelForm";
import { useAddPackage } from "../../../../api/package";
import FormikForm from "../../../../Layout/Dashboard/FormikForm";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
import { PackageInitialValues } from "../../../../types/Package";
import { arrayToObject } from "../../../../utils/arrayToObject";

const AddModel: React.FC = () => {
  const { mutate, status ,isLoading} = useAddPackage();
  const [t] = useTranslation();
  const navigate = useNavigate()
  const handleSubmit = (values: PackageInitialValues) => {
    const DataToSend = JSON.parse(JSON.stringify(values) ); 
    console.log(DataToSend,"DataToSend");
    console.log(values?.configuration);
    
    const  configuration = JSON.stringify(arrayToObject(values?.configuration )) ;
    console.log(configuration);

    mutate({
      ...values,
    });
  };

  useSetPageTitle(t(`page_header.package`));

  return (
    <div className="page">
        <FormikForm
        handleSubmit={handleSubmit}
        initialValues={getInitialValues({})}
        validationSchema={getValidationSchema}
      > 

      <header>
        {t("header.add_new_package")}
      </header>
  
        <main className="w-100 exercise_add_main">
        <ModelForm />
            <div className="exercise_add_buttons">
              <button disabled={isLoading} className="relative button center" type="submit">
                {t("practical.add")}

                {isLoading && (
                  <span className="Spinier_Div">
                    <Spin />
                  </span>
                )}
              </button>
            </div>
          </main>
      </FormikForm>
    </div>
  );
};

export default AddModel;