import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Pencil } from '@gravity-ui/icons';
import { Button, ClipboardButton, Icon, SegmentedRadioGroup } from '@gravity-ui/uikit';
import yaml from 'js-yaml';
import _ from 'lodash';
import { MessageCard } from "../../components/MessageCard/MessageCard.js";
import { MESSAGES } from "../../constants/messages.js";
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
import { generateChildrenPathFromArray } from "../../utils/index.js";
import { editorCn } from "../../utils/cn.js";
import { UpdateModal } from "./UpdateModal/UpdateModal.js";
import './SourceCode.css';
const b = editorCn('source-code');
const formatOptions = [
    { value: 'yaml', content: 'YAML' },
    { value: 'json', content: 'JSON' },
];
const SourceCode = ({ className, showSelectedBlockOnly = false }) => {
    const { content, setContent, selectedBlock } = useMainEditorStore();
    const [isOpen, setIsOpen] = React.useState(false);
    const [format, setFormat] = React.useState('yaml');
    const handleUpdate = (tempConfig) => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        let object;
        try {
            if (tempConfig.trim().startsWith('{') && tempConfig.trim().endsWith('}')) {
                object = JSON.parse(tempConfig);
            }
            else {
                object = yaml.load(tempConfig);
            }
        }
        catch {
            // eslint-disable-next-line no-console
            console.error('JSON.parse failed');
            return;
        }
        if (showSelectedBlockOnly && selectedBlock) {
            // Update only the selected block
            const currentBlockPath = generateChildrenPathFromArray(selectedBlock);
            const newContent = _.cloneDeep(content);
            _.set(newContent.blocks, currentBlockPath, object);
            setContent(newContent);
        }
        else if (object) {
            // Update the entire content
            setContent(object);
        }
        setIsOpen(false);
    };
    const textContent = React.useMemo(() => {
        if (showSelectedBlockOnly && selectedBlock) {
            const currentBlockPath = generateChildrenPathFromArray(selectedBlock);
            const currentConfig = _.get(content.blocks, currentBlockPath || '');
            if (currentConfig) {
                return format === 'yaml'
                    ? yaml.dump(currentConfig)
                    : JSON.stringify(currentConfig, null, 2);
            }
            return 'No block selected';
        }
        return format === 'yaml' ? yaml.dump(content) : JSON.stringify(content, null, 2);
    }, [format, content, showSelectedBlockOnly, selectedBlock]);
    if (!selectedBlock && showSelectedBlockOnly) {
        return (_jsx("div", { className: b(null, className), children: _jsx(MessageCard, { title: MESSAGES.NO_BLOCK_SELECTED.title, description: MESSAGES.NO_BLOCK_SELECTED.description, theme: "info" }) }));
    }
    return (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('header'), children: [_jsx(SegmentedRadioGroup, { size: "m", value: format, options: formatOptions, onUpdate: (value) => setFormat(value) }), _jsxs("div", { className: b('controls'), children: [_jsxs(Button, { view: "outlined", size: "m", onClick: () => setIsOpen(true), children: [_jsx(Icon, { size: 14, data: Pencil }), "Edit"] }), _jsx(ClipboardButton, { view: "outlined", size: "m", text: textContent })] })] }), _jsx("div", { className: b('code'), children: _jsx("div", { className: b('content'), children: textContent }) }), _jsx(UpdateModal, { onApply: handleUpdate, onClose: () => setIsOpen(false), isOpen: isOpen, initialConfig: textContent })] }));
};
export default SourceCode;
//# sourceMappingURL=SourceCode.js.map
