import * as React from 'react';
import { useMemo, useState } from 'react';
import { useSettings } from '../context/SettingsContext';
import Switch from '../ui/Switch';
import { isDevPlayground } from './appSettings';
export default function Settings() {
    const windowLocation = window.location;
    const { setOption, settings: { disableBeforeInput, isAutocomplete, isCharLimit, isCharLimitUtf8, isMaxLength, isRichText, measureTypingPerf, shouldUseLexicalContextMenu, showNestedEditorTreeView, showTableOfContents, showTreeView, }, } = useSettings();
    const [showSettings, setShowSettings] = useState(false);
    const [isSplitScreen, search] = useMemo(() => {
        const parentWindow = window.parent;
        const _search = windowLocation.search;
        const _isSplitScreen = parentWindow && parentWindow.location.pathname === '/split/';
        return [_isSplitScreen, _search];
    }, [windowLocation]);
    return (React.createElement(React.Fragment, null,
        React.createElement("button", { className: `editor-dev-button ${showSettings ? 'active' : ''}`, id: 'options-button', onClick: () => setShowSettings(!showSettings), type: 'button' }),
        showSettings ? (React.createElement("div", { className: 'switches' },
            isDevPlayground && (React.createElement(Switch, { checked: isSplitScreen, onClick: () => {
                    if (isSplitScreen) {
                        window.parent.location.href = `/${search}`;
                    }
                    else {
                        window.location.href = `/split/${search}`;
                    }
                }, text: 'Split Screen' })),
            React.createElement(Switch, { checked: measureTypingPerf, onClick: () => setOption('measureTypingPerf', !measureTypingPerf), text: 'Measure Perf' }),
            React.createElement(Switch, { checked: showTreeView, onClick: () => setOption('showTreeView', !showTreeView), text: 'Debug View' }),
            React.createElement(Switch, { checked: showNestedEditorTreeView, onClick: () => setOption('showNestedEditorTreeView', !showNestedEditorTreeView), text: 'Nested Editors Debug View' }),
            React.createElement(Switch, { checked: isRichText, onClick: () => {
                    setOption('isRichText', !isRichText);
                }, text: 'Rich Text' }),
            React.createElement(Switch, { checked: isCharLimit, onClick: () => setOption('isCharLimit', !isCharLimit), text: 'Char Limit' }),
            React.createElement(Switch, { checked: isCharLimitUtf8, onClick: () => setOption('isCharLimitUtf8', !isCharLimitUtf8), text: 'Char Limit (UTF-8)' }),
            React.createElement(Switch, { checked: isMaxLength, onClick: () => setOption('isMaxLength', !isMaxLength), text: 'Max Length' }),
            React.createElement(Switch, { checked: isAutocomplete, onClick: () => setOption('isAutocomplete', !isAutocomplete), text: 'Autocomplete' }),
            React.createElement(Switch, { checked: disableBeforeInput, onClick: () => {
                    setOption('disableBeforeInput', !disableBeforeInput);
                    setTimeout(() => window.location.reload(), 500);
                }, text: 'Legacy Events' }),
            React.createElement(Switch, { checked: showTableOfContents, onClick: () => {
                    setOption('showTableOfContents', !showTableOfContents);
                }, text: 'Table Of Contents' }),
            React.createElement(Switch, { checked: shouldUseLexicalContextMenu, onClick: () => {
                    setOption('shouldUseLexicalContextMenu', !shouldUseLexicalContextMenu);
                }, text: 'Use Lexical Context Menu' }))) : null));
}
//# sourceMappingURL=Settings.js.map