import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ChevronsCollapseUpRight, ChevronsExpandUpRight } from '@gravity-ui/icons';
import { Button, Icon } from '@gravity-ui/uikit';
import debounce from "lodash/debounce.js";
import MonacoEditor from 'react-monaco-editor';
import { Theme } from "../../../models/index.js";
import { block } from "../../../utils/index.js";
import { EditorContext } from "../../context.js";
import { parseCode } from "../../utils/code.js";
import { options } from "./constants.js";
import './CodeEditor.css';
const b = block('code-editor');
export const CodeEditor = ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }) => {
    const [message, setMessage] = React.useState(() => validator(code));
    const { theme = Theme.Light } = React.useContext(EditorContext);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const onChangeWithValidation = React.useCallback(debounce((newCode) => {
        const validationResult = validator(newCode);
        setMessage(validationResult);
        onChange(parseCode(newCode));
    }, 200), [onChange, validator]);
    return (_jsxs("div", { className: b({ fullscreen: fullscreenModeOn }), children: [_jsx("div", { className: b('header'), children: _jsx(Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn), children: _jsx(Icon, { data: fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight, size: 16 }) }) }), _jsx("div", { className: b('code'), children: _jsx(MonacoEditor, { value: code, language: "yaml", options: options, onChange: onChangeWithValidation, theme: theme === Theme.Dark ? 'vs-dark' : 'vs' }, String(fullscreenModeOn)) }), _jsx("div", { className: b('footer'), children: message && (_jsx("div", { className: b('message-container'), children: _jsx("div", { className: b('message', { status: message.status }), children: message.text }) })) })] }));
};
//# sourceMappingURL=CodeEditor.js.map
