"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_monaco_editor_1 = tslib_1.__importDefault(require("react-monaco-editor"));
const resize_observer_1 = tslib_1.__importDefault(require("@react-hook/resize-observer"));
const react_core_1 = require("@patternfly/react-core");
const common_1 = require("../../../common");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const options = { readOnly: true, scrollBeyondLastLine: false };
const theme = {
    base: 'vs',
    inherit: true,
    rules: [
        { token: '', background: 'e0e0e0' },
        { token: 'number', foreground: '000000' },
        { token: 'type', foreground: '000000' },
        { token: 'string', foreground: '000000' },
        { token: 'keyword', foreground: '0451a5' },
    ],
    colors: {
        'editor.background': '#e0e0e0',
        'editorGutter.background': '#e0e0e0', // no pf token defined
        'editorLineNumber.activeForeground': '#000000',
        'editorLineNumber.foreground': '#000000',
    },
};
const YamlPreview = ({ children, code, setPreviewOpen, loading, }) => {
    const editorDidMount = React.useCallback((editor) => {
        editor.layout();
        editor.focus();
    }, []);
    const editorWillMount = React.useCallback((monaco) => {
        monaco.editor.defineTheme('acm-console', theme);
    }, []);
    const { t } = (0, use_translation_wrapper_1.useTranslation)();
    const editorRef = React.useRef(null);
    const [editorHeight, setEditorHeight] = React.useState();
    (0, resize_observer_1.default)(editorRef, (entry) => {
        setEditorHeight(entry.contentRect.height);
    });
    return loading ? (React.createElement(common_1.LoadingState, { content: "Loading resources" })) : (React.createElement(react_core_1.Stack, null,
        React.createElement(react_core_1.StackItem, null,
            React.createElement("div", null,
                React.createElement(react_core_1.Alert, { isInline: true, title: t('ai:The resource has been saved and the YAML is now read only.'), variant: "info", actionClose: React.createElement(react_core_1.AlertActionCloseButton, { onClose: () => setPreviewOpen(false) }) }),
                React.createElement("div", { className: "readonly-editor-bar" },
                    React.createElement("div", null, children),
                    React.createElement(react_core_1.ClipboardCopyButton, { variant: "plain", id: "copy", textId: "copy", onClick: () => void navigator.clipboard.writeText(code) },
                        React.createElement("div", null))))),
        React.createElement(react_core_1.StackItem, { isFilled: true },
            React.createElement("div", { ref: editorRef, style: { height: '100%' } }, !!editorHeight && (React.createElement(react_monaco_editor_1.default, { language: "yaml", theme: "acm-console", height: editorHeight, value: code, options: options, editorDidMount: editorDidMount, editorWillMount: editorWillMount }))))));
};
exports.default = YamlPreview;
//# sourceMappingURL=YamlPreview.js.map