"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { TRANSFORMERS } from "@lexical/markdown";
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { useExtensionDependency, useOptionalExtensionDependency } from "@lexical/react/useExtensionComponent";
import { useEditorConfig } from "./config/editor-config-context.js";
import { ContentEditable } from "./content-editable.js";
import { useSharedHistoryContext } from "./context/shared-history-context.js";
import { useSharedOnChange } from "./context/shared-on-change-context.js";
import { Debug } from "./debug.js";
import { BylineFloatingUIExtension, selectFloatingUIItems } from "./extensions/byline-floating-ui/byline-floating-ui-extension.js";
import { TableExtension } from "./extensions/table/table-extension.js";
import { TablePlugin } from "./plugins/table-plugin/index.js";
import { ToolbarPlugin } from "./plugins/toolbar-plugin/index.js";
import { TreeViewPlugin } from "./plugins/treeview-plugin/index.js";
import { CAN_USE_DOM } from "./shared/canUseDOM.js";
import { Placeholder } from "./ui/placeholder.js";
import "./editor.css";
import { APPLY_VALUE_TAG } from "./constants.js";
const editor_Editor = /*#__PURE__*/ memo(function({ minHeight, maxHeight }) {
    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
    const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
    useState(()=>({
            count: 0
        }))[0];
    const { onChange } = useSharedOnChange();
    const { historyState } = useSharedHistoryContext();
    const { config: { options: { debug, richText, showTreeView, markdownShortcutPlugin }, placeholderText } } = useEditorConfig();
    const hasTableExtension = void 0 !== useOptionalExtensionDependency(TableExtension);
    const floatingUIItems = selectFloatingUIItems(useExtensionDependency(BylineFloatingUIExtension).config.items);
    const onRef = useCallback((_floatingAnchorElem)=>{
        if (null != _floatingAnchorElem) setFloatingAnchorElem(_floatingAnchorElem);
    }, []);
    const richTextContentEditable = useMemo(()=>/*#__PURE__*/ jsx("div", {
            className: "editor-scroller",
            style: {
                minHeight: minHeight ?? '150px',
                maxHeight: maxHeight ?? void 0
            },
            children: /*#__PURE__*/ jsx("div", {
                className: "editor",
                ref: onRef,
                children: /*#__PURE__*/ jsx(ContentEditable, {})
            })
        }), [
        onRef,
        minHeight,
        maxHeight
    ]);
    const plainTextContentEditable = useMemo(()=>/*#__PURE__*/ jsx("div", {
            className: "editor-scroller",
            style: {
                minHeight: minHeight ?? '150px',
                maxHeight: maxHeight ?? void 0
            },
            children: /*#__PURE__*/ jsx("div", {
                className: "editor",
                children: /*#__PURE__*/ jsx(ContentEditable, {})
            })
        }), [
        minHeight,
        maxHeight
    ]);
    useEffect(()=>{
        const updateViewPortWidth = ()=>{
            const isNextSmallWidthViewport = CAN_USE_DOM && window.matchMedia('(max-width: 1025px)').matches;
            if (isNextSmallWidthViewport !== isSmallWidthViewport) setIsSmallWidthViewport(isNextSmallWidthViewport);
        };
        updateViewPortWidth();
        window.addEventListener('resize', updateViewPortWidth);
        return ()=>{
            window.removeEventListener('resize', updateViewPortWidth);
        };
    }, [
        isSmallWidthViewport
    ]);
    const content = /*#__PURE__*/ jsxs(Fragment, {
        children: [
            hasTableExtension && /*#__PURE__*/ jsx(TablePlugin, {}),
            richText && /*#__PURE__*/ jsx(ToolbarPlugin, {}),
            /*#__PURE__*/ jsxs("div", {
                className: `editor-container ${showTreeView ? 'tree-view' : ''} ${!richText ? 'plain-text' : ''}`,
                children: [
                    /*#__PURE__*/ jsx(OnChangePlugin, {
                        ignoreSelectionChange: true,
                        onChange: (editorState, editor, tags)=>{
                            if (tags.has(APPLY_VALUE_TAG)) return;
                            if (!tags.has('focus') || tags.size > 1) {
                                if (null != onChange) onChange(editorState, editor, tags);
                            }
                        }
                    }),
                    richText ? /*#__PURE__*/ jsxs(Fragment, {
                        children: [
                            /*#__PURE__*/ jsx(RichTextPlugin, {
                                contentEditable: richTextContentEditable,
                                placeholder: /*#__PURE__*/ jsx(Placeholder, {
                                    children: placeholderText
                                }),
                                ErrorBoundary: LexicalErrorBoundary
                            }),
                            /*#__PURE__*/ jsx(HistoryPlugin, {
                                externalHistoryState: historyState
                            }),
                            markdownShortcutPlugin && /*#__PURE__*/ jsx(MarkdownShortcutPlugin, {
                                transformers: TRANSFORMERS
                            }),
                            null != floatingAnchorElem && !isSmallWidthViewport && floatingUIItems.map(({ id, Component })=>/*#__PURE__*/ jsx(Component, {
                                    anchorElem: floatingAnchorElem
                                }, id))
                        ]
                    }) : /*#__PURE__*/ jsxs(Fragment, {
                        children: [
                            /*#__PURE__*/ jsx(PlainTextPlugin, {
                                contentEditable: plainTextContentEditable,
                                placeholder: /*#__PURE__*/ jsx(Placeholder, {
                                    children: placeholderText
                                }),
                                ErrorBoundary: LexicalErrorBoundary
                            }),
                            /*#__PURE__*/ jsx(HistoryPlugin, {
                                externalHistoryState: historyState
                            })
                        ]
                    }),
                    debug && /*#__PURE__*/ jsxs(Fragment, {
                        children: [
                            /*#__PURE__*/ jsx(Debug, {}),
                            /*#__PURE__*/ jsx(TreeViewPlugin, {})
                        ]
                    })
                ]
            })
        ]
    });
    return content;
});
export { editor_Editor as Editor };
