"use client";
import EditableText from "@/components/editable-text";
import { LocalEditor } from "@/components/editor";
import { Button } from "@/components/ui/button";
import useApiMutation from "@/hooks/use-api";
import sluggify from "@/lib/sluggify";
import { NewBlog } from "@/types/types";
import { useMemo, useState } from "react";

export default function BlogEditor() {
	const [title, setTitle] = useState("");
	const slug = useMemo(() => sluggify(title), [title]);
	const {
		trigger: newBlog,
		isMutating: loading,
		isSuccess,
	} = useApiMutation<undefined, NewBlog>(
		"/blog/new",
		undefined,
		"POST",
		true,
		false,
	);

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

	return (
		<section className="m-10">
			{/* This div should have a proper layout, ONLY PART TO BE MODIFIED*/}
			<div>
				{/*Should have an image or a placeholder that opens a dialog when clicked on to set the url of an image.*/}
				<EditableText onChange={setTitle}>
					<h1>{title}</h1>
				</EditableText>
				<p className="text-muted">{slug}</p>
				{/*Should have a summary input box or textarea*/}
			</div>
			<div className="flex">
				<div className="flex-1">
					<LocalEditor content={content} setTitle={setTitle} />
				</div>
			</div>

			<Button
				className="text-black bg-white"
				onClick={async () => {
					try {
						const blogContent = localStorage.getItem("blog_draft");
						if (!blogContent) return;
						if (title.length < 1) return;
						const res = await newBlog({
							title,
							summary: "A summary",
							image: "none",
							slug,
							content: blogContent,
						});
						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>
	);
}