import React from "react";
import { getInitialValues, getValidationSchema } from "./formUtil";
import ModelForm from "./ModelForm";
import FormikForm from "../../../../Layout/Dashboard/FormikForm";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import useSetPageTitle from "../../../../Hooks/useSetPageTitle";
import { PackageInitialValues } from "../../../../types/Package";
import { arrayToObject } from "../../../../utils/arrayToObject";
import { useGetAllPackage, useUpdatePackage } from "../../../../api/package";
import { ParamsEnum } from "../../../../enums/params";
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
import SpinContainer from "../../../../Components/Layout/SpinContainer";

const EditModel: React.FC = () => {
  const { mutate, status ,isLoading} = useUpdatePackage();
  const [t] = useTranslation();
  const {package_id} = useParams<ParamsEnum>();
  const {objectToEdit} = useObjectToEdit();
  
  const {data,isLoading:isLoadingData} = useGetAllPackage({show:package_id})
  console.log(data?.data,"data");
  
  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`));
  if(isLoadingData){
    return <SpinContainer/>
  }
  return (
    <div className="page">
        <FormikForm
        handleSubmit={handleSubmit}
        initialValues={getInitialValues(data?.data)}
        validationSchema={getValidationSchema}
      > 

      <header>
        {t("header.edit_package")}
      </header>
  
        <main className="w-100 exercise_Edit_main">
        <ModelForm />
            <div className="exercise_Edit_buttons">
              <button disabled={isLoading} className="relative button center" type="submit">
                {t("practical.edit")}

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

export default EditModel;