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

const Page = ({ params }: { params: { modelName: string } }) => {
  const [formElements, setFormElements] = useState<FormElement[]>([]);
  const modelName: string = params.modelName;
  const formattedModelName = modelName.replace("-", " ");
  const [formData, setFormData] = useState<any>({});

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

      const modelData = dynamicFormElements[modelName];
      const creatingData = modelData.creating;

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

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

  return (
    <>
      <Breadcrumb pageName={`Add new ${formattedModelName}`} />
      <div className="flex flex-col gap-2">
        <DynamicForm
          submitUrl={`${process.env.NEXT_PUBLIC_API_BASE_URL}${modelName}`} // Pass the submit url
          elements={formElements}
          data={formData}
          method="POST"
          modelName={modelName}
        />
      </div>
    </>
  );
};

export default Page;