"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const debounce_1 = tslib_1.__importDefault(require("lodash/debounce.js"));
const react_monaco_editor_1 = tslib_1.__importDefault(require("react-monaco-editor"));
const models_1 = require("../../../models/index.js");
const utils_1 = require("../../../utils/index.js");
const context_1 = require("../../context.js");
const code_1 = require("../../utils/code.js");
const constants_1 = require("./constants.js");
const b = (0, utils_1.block)('code-editor');
const CodeEditor = ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }) => {
    const [message, setMessage] = React.useState(() => validator(code));
    const { theme = models_1.Theme.Light } = React.useContext(context_1.EditorContext);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const onChangeWithValidation = React.useCallback((0, debounce_1.default)((newCode) => {
        const validationResult = validator(newCode);
        setMessage(validationResult);
        onChange((0, code_1.parseCode)(newCode));
    }, 200), [onChange, validator]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ fullscreen: fullscreenModeOn }), children: [(0, jsx_runtime_1.jsx)("div", { className: b('header'), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: fullscreenModeOn ? icons_1.ChevronsCollapseUpRight : icons_1.ChevronsExpandUpRight, size: 16 }) }) }), (0, jsx_runtime_1.jsx)("div", { className: b('code'), children: (0, jsx_runtime_1.jsx)(react_monaco_editor_1.default, { value: code, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: theme === models_1.Theme.Dark ? 'vs-dark' : 'vs' }, String(fullscreenModeOn)) }), (0, jsx_runtime_1.jsx)("div", { className: b('footer'), children: message && ((0, jsx_runtime_1.jsx)("div", { className: b('message-container'), children: (0, jsx_runtime_1.jsx)("div", { className: b('message', { status: message.status }), children: message.text }) })) })] }));
};
exports.CodeEditor = CodeEditor;
//# sourceMappingURL=CodeEditor.js.map
