import { forwardRef, useImperativeHandle, type ReactNode } from 'react';

export type MDXEditorMethods = {
    setMarkdown: (value: string) => void;
};

export type MDXEditorProps = {
    markdown: string;
    onChange?: (value: string) => void;
    readOnly?: boolean;
    className?: string;
    contentEditableClassName?: string;
    plugins?: unknown[];
};

export const MDXEditor = forwardRef<MDXEditorMethods, MDXEditorProps>(function MDXEditor(
    { markdown, onChange, readOnly, className },
    ref,
) {
    useImperativeHandle(
        ref,
        () => ({
            setMarkdown: () => undefined,
        }),
        [],
    );

    if (readOnly) {
        return (
            <div data-testid="md-preview" data-class-name={className}>
                {markdown}
            </div>
        );
    }

    return (
        <textarea
            aria-label="Markdown Editor"
            value={markdown}
            data-class-name={className}
            onChange={(event) => onChange?.(event.target.value)}
        />
    );
});

function Control(): ReactNode {
    return <span />;
}

function plugin(): Record<string, never> {
    return {};
}

export const BlockTypeSelect = Control;
export const BoldItalicUnderlineToggles = Control;
export const CodeToggle = Control;
export const CreateLink = Control;
export const InsertCodeBlock = Control;
export const InsertTable = Control;
export const ListsToggle = Control;
export const Separator = Control;
export const UndoRedo = Control;

export const codeBlockPlugin = plugin;
export const codeMirrorPlugin = plugin;
export const headingsPlugin = plugin;
export const linkDialogPlugin = plugin;
export const linkPlugin = plugin;
export const listsPlugin = plugin;
export const markdownShortcutPlugin = plugin;
export const quotePlugin = plugin;
export const tablePlugin = plugin;
export const thematicBreakPlugin = plugin;
export const toolbarPlugin = plugin;