import * as React from 'react';
import { useT } from 'use-t';
import { BasicTooltip } from 'nice-ui/lib/4-card/BasicTooltip';
import BasicButton from 'nice-ui/lib/2-inline-block/BasicButton';
import { Iconista } from 'nice-ui/lib/icons/Iconista';
import { Flex } from 'nice-ui/lib/3-list-item/Flex';
import { Space } from 'nice-ui/lib/3-list-item/Space';
import { ContextPaneHeader } from '../../../../components/ContextPaneHeader';
import { ContextPaneHeaderSep } from '../../../../components/ContextPaneHeaderSep';
import { FormattingTitle } from '../FormattingTitle';
import { FormattingView } from '../views/view/FormattingView';
import { useToolbarPlugin } from '../../context';
import { Code } from 'nice-ui/lib/1-inline/Code';
import { FormattingPane } from '../FormattingPane';
import { ContextSep } from 'nice-ui/lib/4-card/ContextMenu';
import { ButtonSeparator } from '../../../../components/ButtonSeparator';
import { FormattingEditForm } from './FormattingEditForm';
import { SoftLockedDeleteButton } from '../../components/SoftLockedDeleteButton';
import { useBehaviorSubject } from 'nice-ui/lib/hooks/useBehaviorSubject';
import { useFormattingPane } from './context';
export const FormattingDisplay = ({ formatting, onClose }) => {
    const state = useFormattingPane();
    const editFormatting = useBehaviorSubject(state.editing$);
    const view = useBehaviorSubject(state.view$);
    const { surface } = useToolbarPlugin();
    const [t] = useT();
    const doEdit = view === 'edit' && !!editFormatting;
    return (React.createElement(FormattingPane, null,
        React.createElement(ContextPaneHeader, { short: true, onBackClick: onClose, right: doEdit ? (React.createElement(Flex, { style: { justifyContent: 'flex-end', alignItems: 'center' } },
                React.createElement("div", { style: { fontSize: '13px', lineHeight: '1.3em' } },
                    React.createElement(Code, { spacious: true, alt: true, gray: true, nowrap: true }, t('editing'))),
                React.createElement(Space, { horizontal: true }),
                React.createElement(BasicTooltip, { renderTooltip: () => t('Stop editing') },
                    React.createElement(BasicButton, { size: 32, rounder: true, onClick: state.switchToViewPanel },
                        React.createElement(Iconista, { set: 'lucide', icon: 'pencil-off', width: 16, height: 16 }))))) : (React.createElement(Flex, { style: { justifyContent: 'flex-end', alignItems: 'center' } },
                React.createElement(SoftLockedDeleteButton, { onDelete: () => {
                        surface.events.et.format({
                            slice: formatting.range,
                            action: 'del',
                        });
                        onClose?.();
                    } }),
                React.createElement(Space, { horizontal: true, size: -2 }),
                React.createElement(ButtonSeparator, null),
                React.createElement(Space, { horizontal: true, size: -2 }),
                React.createElement(BasicTooltip, { renderTooltip: () => t('Edit') },
                    React.createElement(BasicButton, { size: 32, rounder: true, onClick: state.switchToEditPanel },
                        React.createElement(Iconista, { set: 'lucide', icon: 'pencil', width: 16, height: 16 }))))) },
            React.createElement(FormattingTitle, { formatting: formatting })),
        React.createElement(ContextPaneHeaderSep, null),
        doEdit ? (React.createElement(FormattingEditForm, { formatting: editFormatting, onSave: state.returnFromEditPanelAndSave })) : (React.createElement(React.Fragment, null,
            React.createElement(ContextSep, null),
            React.createElement("div", { style: { padding: '4px 16px 16px' } },
                React.createElement(FormattingView, { formatting: formatting }))))));
};
//# sourceMappingURL=FormattingDisplay.js.map