"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditorSettings = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../../classname.js");
const bundle_1 = require("../../i18n/bundle/index.js");
const WysiwygMode_1 = tslib_1.__importDefault(require("../../icons/WysiwygMode.js"));
const lodash_1 = require("../../lodash.js");
const hooks_1 = require("../../react-utils/hooks.js");
const toolbar_1 = require("../../toolbar/index.js");
const version_1 = require("../../version.js");
const MarkdownHints_1 = require("./MarkdownHints/index.js");
require("./index.css");
const placement = ['bottom-end', 'top-end'];
const bSettings = (0, classname_1.cn)('editor-settings');
const bContent = (0, classname_1.cn)('settings-content');
exports.EditorSettings = (0, react_1.memo)(function EditorSettings(props) {
    const { className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible } = props;
    const [chevronElement, setChevronElement] = (0, react_1.useState)(null);
    const [popupShown, , hidePopup, togglePopup] = (0, hooks_1.useBooleanState)(false);
    return ((0, jsx_runtime_1.jsxs)("div", { className: bSettings(null, [className]), children: [renderPreviewButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, bundle_1.i18n)('preview_hint'), hotkey: "mod+shift+p", children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Eye }) }) }), settingsVisible && (0, jsx_runtime_1.jsx)("div", { className: bSettings('separator') })] })), settingsVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, className: bSettings('dropdown-button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Gear }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: bContent(null, [className]), children: [(0, jsx_runtime_1.jsxs)(uikit_1.Menu, { size: "l", className: bContent('mode'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { active: mode === 'wysiwyg', onClick: () => {
                            onModeChange('wysiwyg');
                            onClose();
                        }, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: WysiwygMode_1.default }), children: (0, bundle_1.i18n)('settings_wysiwyg') }), (0, jsx_runtime_1.jsxs)(uikit_1.Menu.Item, { active: mode === 'markup', onClick: () => {
                            onModeChange('markup');
                            onClose();
                        }, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.LogoMarkdown }), children: [(0, bundle_1.i18n)('settings_markup'), (0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { popoverProps: {
                                    placement: mdHelpPlacement,
                                    modal: false,
                                }, className: bContent('mode-help'), children: (0, jsx_runtime_1.jsx)("div", { onClick: (e) => {
                                        // stop clicks propagation
                                        // because otherwise click in MarkdownHints handled as click on MenuItem
                                        e.stopPropagation();
                                    }, children: (0, jsx_runtime_1.jsx)(MarkdownHints_1.MarkdownHints, {}) }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: bContent('separator') }), !showPreview && ((0, jsx_runtime_1.jsxs)("div", { className: bContent('toolbar'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { size: "m", checked: toolbarVisibility, onUpdate: onToolbarVisibilityChange, children: (0, bundle_1.i18n)('settings_menubar') }), (0, jsx_runtime_1.jsx)("div", { className: bContent('toolbar-hint'), children: (0, bundle_1.i18n)('settings_hint') })] })), splitMode && ((0, jsx_runtime_1.jsxs)("div", { className: bContent('split-mode'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { size: "m", disabled: mode !== 'markup', checked: splitModeEnabled, onUpdate: onSplitModeChange ?? lodash_1.noop, children: (0, bundle_1.i18n)('settings_split-mode') }), (0, jsx_runtime_1.jsx)("div", { className: bContent('toolbar-hint'), children: (0, bundle_1.i18n)('settings_split-mode-hint') })] })), (0, jsx_runtime_1.jsx)("span", { className: bContent('version'), children: version_1.VERSION })] }));
};
//# sourceMappingURL=index.js.map
