"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormattingsManagePane = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const state_1 = require("./state");
const FormattingList_1 = require("./FormattingList");
const FormattingDisplay_1 = require("./FormattingDisplay");
const context_1 = require("../../context");
const context_2 = require("./context");
const FormattingsManagePane = ({ inline }) => {
    const { toolbar } = (0, context_1.useToolbarPlugin)();
    // biome-ignore lint: too many dependencies
    const state = React.useMemo(() => new state_1.FormattingManageState(toolbar, inline), [toolbar, inline?.key()]);
    const formattings = (0, useBehaviorSubject_1.useBehaviorSubject)(React.useMemo(() => state.getFormattings$(), [state]));
    // biome-ignore lint: manually manage dependencies
    React.useLayoutEffect(() => {
        if (formattings.length === 1) {
            state.select(formattings[0]);
        }
    }, [formattings]);
    const selected = (0, useBehaviorSubject_1.useBehaviorSubject)(state.selected$);
    if (!formattings.length)
        return null;
    if (selected || formattings.length === 1) {
        return (React.createElement(context_2.context.Provider, { value: state },
            React.createElement(FormattingDisplay_1.FormattingDisplay, { formatting: selected || formattings[0], onClose: !selected || formattings.length === 1 ? void 0 : () => state.select(null) })));
    }
    return (React.createElement(context_2.context.Provider, { value: state },
        React.createElement(FormattingList_1.FormattingList, { formattings: formattings, onSelect: state.select })));
};
exports.FormattingsManagePane = FormattingsManagePane;
//# sourceMappingURL=index.js.map