"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormattingDisplay = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const use_t_1 = require("use-t");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const BasicButton_1 = tslib_1.__importDefault(require("nice-ui/lib/2-inline-block/BasicButton"));
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const Flex_1 = require("nice-ui/lib/3-list-item/Flex");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const ContextPaneHeader_1 = require("../../../../components/ContextPaneHeader");
const ContextPaneHeaderSep_1 = require("../../../../components/ContextPaneHeaderSep");
const FormattingTitle_1 = require("../FormattingTitle");
const FormattingView_1 = require("../views/view/FormattingView");
const context_1 = require("../../context");
const Code_1 = require("nice-ui/lib/1-inline/Code");
const FormattingPane_1 = require("../FormattingPane");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const ButtonSeparator_1 = require("../../../../components/ButtonSeparator");
const FormattingEditForm_1 = require("./FormattingEditForm");
const SoftLockedDeleteButton_1 = require("../../components/SoftLockedDeleteButton");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const context_2 = require("./context");
const FormattingDisplay = ({ formatting, onClose }) => {
    const state = (0, context_2.useFormattingPane)();
    const editFormatting = (0, useBehaviorSubject_1.useBehaviorSubject)(state.editing$);
    const view = (0, useBehaviorSubject_1.useBehaviorSubject)(state.view$);
    const { surface } = (0, context_1.useToolbarPlugin)();
    const [t] = (0, use_t_1.useT)();
    const doEdit = view === 'edit' && !!editFormatting;
    return (React.createElement(FormattingPane_1.FormattingPane, null,
        React.createElement(ContextPaneHeader_1.ContextPaneHeader, { short: true, onBackClick: onClose, right: doEdit ? (React.createElement(Flex_1.Flex, { style: { justifyContent: 'flex-end', alignItems: 'center' } },
                React.createElement("div", { style: { fontSize: '13px', lineHeight: '1.3em' } },
                    React.createElement(Code_1.Code, { spacious: true, alt: true, gray: true, nowrap: true }, t('editing'))),
                React.createElement(Space_1.Space, { horizontal: true }),
                React.createElement(BasicTooltip_1.BasicTooltip, { renderTooltip: () => t('Stop editing') },
                    React.createElement(BasicButton_1.default, { size: 32, rounder: true, onClick: state.switchToViewPanel },
                        React.createElement(Iconista_1.Iconista, { set: 'lucide', icon: 'pencil-off', width: 16, height: 16 }))))) : (React.createElement(Flex_1.Flex, { style: { justifyContent: 'flex-end', alignItems: 'center' } },
                React.createElement(SoftLockedDeleteButton_1.SoftLockedDeleteButton, { onDelete: () => {
                        surface.events.et.format({
                            slice: formatting.range,
                            action: 'del',
                        });
                        onClose?.();
                    } }),
                React.createElement(Space_1.Space, { horizontal: true, size: -2 }),
                React.createElement(ButtonSeparator_1.ButtonSeparator, null),
                React.createElement(Space_1.Space, { horizontal: true, size: -2 }),
                React.createElement(BasicTooltip_1.BasicTooltip, { renderTooltip: () => t('Edit') },
                    React.createElement(BasicButton_1.default, { size: 32, rounder: true, onClick: state.switchToEditPanel },
                        React.createElement(Iconista_1.Iconista, { set: 'lucide', icon: 'pencil', width: 16, height: 16 }))))) },
            React.createElement(FormattingTitle_1.FormattingTitle, { formatting: formatting })),
        React.createElement(ContextPaneHeaderSep_1.ContextPaneHeaderSep, null),
        doEdit ? (React.createElement(FormattingEditForm_1.FormattingEditForm, { formatting: editFormatting, onSave: state.returnFromEditPanelAndSave })) : (React.createElement(React.Fragment, null,
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement("div", { style: { padding: '4px 16px 16px' } },
                React.createElement(FormattingView_1.FormattingView, { formatting: formatting }))))));
};
exports.FormattingDisplay = FormattingDisplay;
//# sourceMappingURL=FormattingDisplay.js.map