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, Box, Button, Checkbox, HelpMark, Icon, Menu, Popup, Text, sp, } from '@gravity-ui/uikit';
import { LAYOUT } from "../../common/layout.js";
import { cn } from "../../classname.js";
import { i18n } from "../../i18n/bundle/index.js";
import WysiwygModeIcon from "../../icons/WysiwygMode.js";
import { noop } from "../../lodash.js";
import { useTargetZIndex } from "../../react-utils/index.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);
    const zIndex = useTargetZIndex(LAYOUT.STICKY_TOOLBAR);
    const areSettingsVisible = settingsVisible === true || (Array.isArray(settingsVisible) && settingsVisible.length > 0);
    return (_jsxs("div", { className: bSettings(null, className), children: [renderPreviewButton && (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: i18n('preview_label'), hotkey: "mod+shift+p", children: _jsx(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": i18n('preview_label'), children: _jsx(Icon, { data: Eye }) }) }), settingsVisible && _jsx("div", { className: bSettings('separator') })] })), areSettingsVisible && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), "aria-label": i18n('settings_label'), children: _jsx(Icon, { data: Gear }) }), _jsx(Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, zIndex: zIndex, children: _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 (_jsxs("div", { className: bContent(null, [className]), "data-qa": qa, children: [showModeSetting && (_jsxs(Menu, { size: "l", className: bContent('mode'), children: [_jsx(Menu.Item, { qa: "g-md-settings-mode-wysiwyg", active: mode === 'wysiwyg', onClick: () => {
                            onModeChange('wysiwyg');
                            onClose();
                        }, iconStart: _jsx(Icon, { data: WysiwygModeIcon }), children: i18n('settings_wysiwyg') }), _jsxs(Menu.Item, { qa: "g-md-settings-mode-markup", active: mode === 'markup', onClick: () => {
                            onModeChange('markup');
                            onClose();
                        }, iconStart: _jsx(Icon, { data: LogoMarkdown }), children: [i18n('settings_markup'), !disableMark && (_jsx(HelpMark, { popoverProps: {
                                    placement: mdHelpPlacement,
                                    modal: false,
                                    zIndex,
                                }, 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, {}) }) }))] })] })), showModeSetting && (showSplitModeSetting || showToolbarSetting) && (_jsx("div", { className: bContent('separator') })), showToolbarSetting && !showPreview && (_jsx(CheckboxWithHint, { checked: toolbarVisibility, className: bContent('toolbar'), onUpdate: onToolbarVisibilityChange, title: i18n('settings_menubar'), hint: i18n('settings_hint') })), showSplitModeSetting && splitMode && (_jsx(CheckboxWithHint, { checked: splitModeEnabled, disabled: mode !== 'markup', className: bContent('split-mode'), onUpdate: onSplitModeChange ?? noop, title: i18n('settings_split-mode'), hint: i18n('settings_split-mode-hint') })), _jsx(Text, { variant: "code-inline-1", className: bContent('version'), children: VERSION })] }));
};
function CheckboxWithHint({ checked, disabled, onUpdate, title, hint, className, }) {
    return (_jsxs(Box, { spacing: { px: 4, pt: 2, pb: 3 }, className: bContent('check-box', className), children: [_jsx(Checkbox, { size: "m", disabled: disabled, checked: checked, onUpdate: onUpdate, children: title }), _jsx(Text, { as: "div", color: "secondary", className: bContent('check-hint', sp({ mt: 1, pl: 6 })), children: hint })] }));
}
//# sourceMappingURL=index.js.map
