import { JSX, useCallback, useMemo, useState } from "react";
import * as React from "react";

import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";

export function useEditorModal(): [
    JSX.Element | null,
    (title: string, showModal: (onClose: () => void) => JSX.Element) => void
] {
    const [modalContent, setModalContent] = useState<null | {
        closeOnClickOutside: boolean;
        content: JSX.Element;
        title: string;
    }>(null);

    const onClose = useCallback(() => {
        setModalContent(null);
    }, []);

    const modal = useMemo(() => {
        if (modalContent === null) {
            return null;
        }
        const { title, content } = modalContent;
        return (
            <Dialog open={true} onOpenChange={onClose}>
                <DialogContent className="w-[70vw] max-w-lg sm:max-w-xl md:max-w-2xl">
                    <DialogHeader>
                        <DialogTitle>{title}</DialogTitle>
                    </DialogHeader>
                    {content}
                </DialogContent>
            </Dialog>
        );
    }, [modalContent, onClose]);

    const showModal = useCallback(
        (
            title: string,
            getContent: (onClose: () => void) => JSX.Element,
            closeOnClickOutside = false
        ) => {
            setModalContent({
                closeOnClickOutside,
                content: getContent(onClose),
                title,
            });
        },
        [onClose]
    );

    return [modal, showModal];
}