"use client";
import { Button } from "@/components/ui/button";
import useApiMutation from "@/hooks/use-api";
import dynamic from "next/dynamic";

const Editor = dynamic(
	() => import("@/components/editor").then((mod) => mod.Editor),
	{ ssr: false },
);

export default function BlogEditor() {
	const {
		trigger,
		isMutating: loading,
		isSuccess,
	} = useApiMutation("/blog/new", undefined, "POST", false, true);

	const content = localStorage.getItem("blog_draft") ?? "";

	return (
		<section className="m-10">
			<div className="flex">
				<div className="flex-1">
					<Editor content={content} />
				</div>
			</div>

			<Button
				className="text-black bg-white"
				onClick={async () => {
					try {
						const blogContent = localStorage.getItem("blog_draft");
						const res = await trigger({
							label: "This is my label",
							summary: "A summary",
							image: "none",
							href: "none",
							blogID: "id",
							slug: "myslug",
							content: blogContent,
							published: "",
						});
						if (!res)
							throw new Error("The server hasn't responded.");
						if (res.status === "Error")
							throw new Error(res.message);
						if (res.data) console.log(res.data);
						return res;
					} catch (error: any) {
						throw new Error(error.message);
					}
				}}
			>
				Sauvegarder
			</Button>
		</section>
	);
}