import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { memo, useState } from 'react';
import { Eye, Gear, LogoMarkdown } from '@gravity-ui/icons';
import { ActionTooltip, Button, Checkbox, HelpMark, Icon, Menu, Popup, } from '@gravity-ui/uikit';
import { cn } from "../../classname.js";
import { i18n } from "../../i18n/bundle/index.js";
import WysiwygModeIcon from "../../icons/WysiwygMode.js";
import { noop } from "../../lodash.js";
import { useBooleanState } from "../../react-utils/hooks.js";
import { ToolbarTooltipDelay } from "../../toolbar/index.js";
import { VERSION } from "../../version.js";
import { MarkdownHints } from "./MarkdownHints/index.js";
import "./index.css";
const placement = ['bottom-end', 'top-end'];
const bSettings = cn('editor-settings');
const bContent = cn('settings-content');
export const EditorSettings = memo(function EditorSettings(props) {
    const { className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible } = props;
    const [chevronElement, setChevronElement] = useState(null);
    const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);
    return (_jsxs("div", { className: bSettings(null, [className]), children: [renderPreviewButton && (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: i18n('preview_hint'), hotkey: "mod+shift+p", children: _jsx(Button, { size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: _jsx(Icon, { data: Eye }) }) }), settingsVisible && _jsx("div", { className: bSettings('separator') })] })), settingsVisible && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, className: bSettings('dropdown-button'), children: _jsx(Icon, { data: Gear }) }), _jsx(Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: _jsx(SettingsContent, { ...props, onClose: hidePopup, className: bSettings('content') }) })] }))] }));
});
const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, }) {
    return (_jsxs("div", { className: bContent(null, [className]), children: [_jsxs(Menu, { size: "l", className: bContent('mode'), children: [_jsx(Menu.Item, { active: mode === 'wysiwyg', onClick: () => {
                            onModeChange('wysiwyg');
                            onClose();
                        }, iconStart: _jsx(Icon, { data: WysiwygModeIcon }), children: i18n('settings_wysiwyg') }), _jsxs(Menu.Item, { active: mode === 'markup', onClick: () => {
                            onModeChange('markup');
                            onClose();
                        }, iconStart: _jsx(Icon, { data: LogoMarkdown }), children: [i18n('settings_markup'), _jsx(HelpMark, { popoverProps: {
                                    placement: mdHelpPlacement,
                                    modal: false,
                                }, className: bContent('mode-help'), children: _jsx("div", { onClick: (e) => {
                                        // stop clicks propagation
                                        // because otherwise click in MarkdownHints handled as click on MenuItem
                                        e.stopPropagation();
                                    }, children: _jsx(MarkdownHints, {}) }) })] })] }), _jsx("div", { className: bContent('separator') }), !showPreview && (_jsxs("div", { className: bContent('toolbar'), children: [_jsx(Checkbox, { size: "m", checked: toolbarVisibility, onUpdate: onToolbarVisibilityChange, children: i18n('settings_menubar') }), _jsx("div", { className: bContent('toolbar-hint'), children: i18n('settings_hint') })] })), splitMode && (_jsxs("div", { className: bContent('split-mode'), children: [_jsx(Checkbox, { size: "m", disabled: mode !== 'markup', checked: splitModeEnabled, onUpdate: onSplitModeChange ?? noop, children: i18n('settings_split-mode') }), _jsx("div", { className: bContent('toolbar-hint'), children: i18n('settings_split-mode-hint') })] })), _jsx("span", { className: bContent('version'), children: VERSION })] }));
};
//# sourceMappingURL=index.js.map
