import { mergeRefs } from "./mergeRefs";
import { createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps, } from "solid-js";
import { useLexicalComposerContext } from "../LexicalComposerContext";
export function ContentEditableElement(props) {
    props = mergeProps({
        role: "textbox",
        spellCheck: true,
    }, props);
    const [, rest] = splitProps(props, [
        "ariaActiveDescendant",
        "ariaAutoComplete",
        "ariaControls",
        "ariaDescribedBy",
        "ariaExpanded",
        "ariaLabel",
        "ariaLabelledBy",
        "ariaMultiline",
        "ariaOwns",
        "ariaRequired",
        "autoCapitalize",
        "class",
        "data-testid",
        "id",
        "ref",
        "role",
        "spellcheck",
        "style",
        "tabIndex",
    ]);
    const [editor] = useLexicalComposerContext();
    const [isEditable, setEditable] = createSignal(editor.isEditable());
    const handleRef = (rootElement) => {
        // onMount is used here because we want to make sure `rootElement.ownerDocument.defaultView` is defined.
        onMount(() => {
            // defaultView is required for a root element.
            // In multi-window setups, the defaultView may not exist at certain points.
            if (rootElement &&
                rootElement.ownerDocument &&
                rootElement.ownerDocument.defaultView) {
                editor.setRootElement(rootElement);
            }
            else {
                editor.setRootElement(null);
            }
        });
    };
    createEffect(() => {
        setEditable(editor.isEditable());
        onCleanup(editor.registerEditableListener((currentIsEditable) => {
            setEditable(currentIsEditable);
        }));
    });
    return (<div aria-activedescendant={isEditable() ? props.ariaActiveDescendant : undefined} aria-autocomplete={isEditable() ? props.ariaAutoComplete : "none"} aria-controls={isEditable() ? props.ariaControls : undefined} aria-describedby={props.ariaDescribedBy} 
    // for compat, only override aria-errormessage if ariaErrorMessage is defined
    {...(props.ariaErrorMessage != null
        ? { "aria-errormessage": props.ariaErrorMessage }
        : {})} aria-expanded={isEditable() && props.role === "combobox"
            ? !!props.ariaExpanded
            : undefined} 
    // for compat, only override aria-invalid if ariaInvalid is defined
    {...(props.ariaInvalid != null
        ? { "aria-invalid": props.ariaInvalid }
        : {})} aria-label={props.ariaLabel} aria-labelledby={props.ariaLabelledBy} aria-multiline={props.ariaMultiline} aria-owns={isEditable() ? props.ariaOwns : undefined} aria-readonly={isEditable() ? undefined : true} aria-required={props.ariaRequired} autoCapitalize={props.autoCapitalize} class={props.class} contentEditable={isEditable()} data-testid={props["data-testid"]} id={props.id} ref={mergeRefs(props.ref, handleRef)} role={isEditable() ? props.role : undefined} spellcheck={props.spellcheck} style={props.style} tabIndex={props.tabIndex} {...rest}/>);
}