"use client";
import { FormElement } from "@/types/form";
import DynamicForm from "@/components/Form/DynamicForm";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import { useState, useEffect } from "react";
import axios from "axios";

//initial props for edit model
const page = ({ params }: { params: { modelName: string; id: number } }) => {
  const [formElements, setFormElements] = useState<FormElement[]>([]);
  const [formData, setFormData] = useState<any>({});
  const modelName: string = params.modelName;
  const id: Number = params.id;
  const formattedModelName = modelName.replace("-", " ");

  const fetchFormElements = async () => {
    try {
      const metadata: any = localStorage.getItem("metaData");
      const dynamicFormElements = JSON.parse(metadata).modules;

      const modelData = dynamicFormElements[modelName];
      const updatingData = modelData.updating;

      setFormElements(updatingData);
    } catch (error) {
      console.error("Error fetching form elements:", error);
    }
  };

  const fetchFormData = async () => {
    const token = localStorage.getItem("jobAdminJwtToken");
    try {
      const response: any = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}${modelName}/${id}`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        },
      );
      setFormData(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
      return { data: [], total: 0 };
    }
  };

  useEffect(() => {
    fetchFormElements();
    fetchFormData();
  }, [modelName]);

  return (
    <>
      <Breadcrumb pageName={`Edit ${formattedModelName}`} />
      <div className="flex flex-col gap-2">
        <DynamicForm
          submitUrl={`${process.env.NEXT_PUBLIC_API_BASE_URL}${modelName}/${id}`} // Pass the submit url
          elements={formElements}
          data={formData != null ? formData : []}
          method="PUT"
          modelName={modelName}
        />
      </div>
    </>
  );
};

export default page;