"use client";

import * as React from "react";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { $insertNodes } from "lexical";
import { ImageIcon } from "lucide-react";

import MediaManager, {
    type MediaPicked,
} from "@/components/media/media-manager";
import { Button } from "@/components/ui/button";
import { $createImageNode } from "@/components/editor/nodes/image-node";

export function MediaManagerToolbarPlugin() {
    const [editor] = useLexicalComposerContext();

    const insertImage = (m: MediaPicked | null) => {
        if (!m?.url) return;
        editor.update(() => {
            const node = $createImageNode({
                src: m.url,
                altText: m.originalName ?? m.filename ?? "media",
            });
            $insertNodes([node]);
        });
    };

    return (
        <MediaManager
            mode="single"
            value={null}
            onChange={(val) => insertImage((val as MediaPicked) ?? null)}
            title="افزودن تصویر"
            description="یک رسانه انتخاب کنید تا داخل متن درج شود."
            trigger={
                <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="h-8 gap-2"
                >
                    <ImageIcon className="size-4" />
                    مدیا
                </Button>
            }
        />
    );
}