import * as React from 'react';
import { useBehaviorSubject } from 'nice-ui/lib/hooks/useBehaviorSubject';
import { FormattingManageState } from './state';
import { FormattingList } from './FormattingList';
import { FormattingDisplay } from './FormattingDisplay';
import { useToolbarPlugin } from '../../context';
import { context } from './context';
export const FormattingsManagePane = ({ inline }) => {
    const { toolbar } = useToolbarPlugin();
    // biome-ignore lint: too many dependencies
    const state = React.useMemo(() => new FormattingManageState(toolbar, inline), [toolbar, inline?.key()]);
    const formattings = 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 = useBehaviorSubject(state.selected$);
    if (!formattings.length)
        return null;
    if (selected || formattings.length === 1) {
        return (React.createElement(context.Provider, { value: state },
            React.createElement(FormattingDisplay, { formatting: selected || formattings[0], onClose: !selected || formattings.length === 1 ? void 0 : () => state.select(null) })));
    }
    return (React.createElement(context.Provider, { value: state },
        React.createElement(FormattingList, { formattings: formattings, onSelect: state.select })));
};
//# sourceMappingURL=index.js.map