"use client";
import Loading from "@/components/loading";
import { useGetCmsDetails, useUpdateCms } from "@/hooks/queries/useCmsQueries";
import { BreadcrumbItem } from "@/types/shared";
import { use } from "react";
import MarketingForm from "../../_components/MarketingForm";

interface IProps {
  params: Promise<{ id: string }>;
}

const EditMarketingPage = ({ params }: IProps) => {
  const { id } = use(params);
  const { data, isPending: isLoading } = useGetCmsDetails(id);
  const { mutate: updateCms, isPending: isUpdating } = useUpdateCms(id);

  const breadcrumbItems: BreadcrumbItem[] = [
    {
      href: "/",
      name: "Dashboard",
    },
    {
      href: "/marketing",
      name: "Marketing",
    },
    {
      href: `/marketing/${id}`,
      name: "Edit Marketing",
    },
  ];

  const handleSubmit = (formData: any) => {
    updateCms(formData, {
      onSuccess: () => {
        console.log("CMS updated successfully");
      },
      onError: (error) => {
        console.error("Error updating CMS:", error);
      },
    });
  };

  if (isLoading || !data?.data) return <Loading />;

  return (
    <MarketingForm
      breadcrumbItems={breadcrumbItems}
      title="Edit Marketing page"
      onSubmit={handleSubmit}
      isPending={isUpdating}
      initialData={data.data}
    />
  );
};

export default EditMarketingPage;
