"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 layout_1 = require("../../common/layout.js");
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 react_utils_1 = require("../../react-utils/index.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);
    const zIndex = (0, react_utils_1.useTargetZIndex)(layout_1.LAYOUT.STICKY_TOOLBAR);
    const areSettingsVisible = settingsVisible === true || (Array.isArray(settingsVisible) && settingsVisible.length > 0);
    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_label'), hotkey: "mod+shift+p", children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, "aria-label": (0, bundle_1.i18n)('preview_label'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Eye }) }) }), settingsVisible && (0, jsx_runtime_1.jsx)("div", { className: bSettings('separator') })] })), areSettingsVisible && ((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, qa: "g-md-settings-button", className: bSettings('dropdown-button'), "aria-label": (0, bundle_1.i18n)('settings_label'), 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, zIndex: zIndex, children: (0, jsx_runtime_1.jsx)(SettingsContent, { ...props, qa: "g-md-settings-content", onClose: hidePopup, className: bSettings('content'), zIndex: zIndex }) })] }))] }));
});
const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, settingsVisible, qa, disableMark, zIndex, }) {
    const isSettingsArray = Array.isArray(settingsVisible);
    const showModeSetting = isSettingsArray ? settingsVisible?.includes('mode') : true;
    const showToolbarSetting = isSettingsArray ? settingsVisible?.includes('toolbar') : true;
    const showSplitModeSetting = isSettingsArray ? settingsVisible?.includes('split') : true;
    return ((0, jsx_runtime_1.jsxs)("div", { className: bContent(null, [className]), "data-qa": qa, children: [showModeSetting && ((0, jsx_runtime_1.jsxs)(uikit_1.Menu, { size: "l", className: bContent('mode'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { qa: "g-md-settings-mode-wysiwyg", 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, { qa: "g-md-settings-mode-markup", 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'), !disableMark && ((0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { popoverProps: {
                                    placement: mdHelpPlacement,
                                    modal: false,
                                    zIndex,
                                }, 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, {}) }) }))] })] })), showModeSetting && (showSplitModeSetting || showToolbarSetting) && ((0, jsx_runtime_1.jsx)("div", { className: bContent('separator') })), showToolbarSetting && !showPreview && ((0, jsx_runtime_1.jsx)(CheckboxWithHint, { checked: toolbarVisibility, className: bContent('toolbar'), onUpdate: onToolbarVisibilityChange, title: (0, bundle_1.i18n)('settings_menubar'), hint: (0, bundle_1.i18n)('settings_hint') })), showSplitModeSetting && splitMode && ((0, jsx_runtime_1.jsx)(CheckboxWithHint, { checked: splitModeEnabled, disabled: mode !== 'markup', className: bContent('split-mode'), onUpdate: onSplitModeChange ?? lodash_1.noop, title: (0, bundle_1.i18n)('settings_split-mode'), hint: (0, bundle_1.i18n)('settings_split-mode-hint') })), (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "code-inline-1", className: bContent('version'), children: version_1.VERSION })] }));
};
function CheckboxWithHint({ checked, disabled, onUpdate, title, hint, className, }) {
    return ((0, jsx_runtime_1.jsxs)(uikit_1.Box, { spacing: { px: 4, pt: 2, pb: 3 }, className: bContent('check-box', className), children: [(0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { size: "m", disabled: disabled, checked: checked, onUpdate: onUpdate, children: title }), (0, jsx_runtime_1.jsx)(uikit_1.Text, { as: "div", color: "secondary", className: bContent('check-hint', (0, uikit_1.sp)({ mt: 1, pl: 6 })), children: hint })] }));
}
//# sourceMappingURL=index.js.map
