import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2025 GoodData Corporation
import { useState } from "react";
import * as jsYaml from "js-yaml";
import { merge } from "lodash-es";
import { useIntl } from "react-intl";
import { Button, Hyperlink, Overlay } from "@gooddata/sdk-ui-kit";
import { CodeMirrorEditor } from "./CodeMirrorEditor.js";
import { SnippetHeader, SnippetItem } from "./SnippetItem.js";
import { SNIPPETS } from "./snippets.js";
import { messages } from "../../../../locales.js";
const EDITOR_ALIGN_POINTS = [
    {
        align: "br bl",
        offset: { x: 10, y: 0 },
    },
];
export function ConfigEditor({ value, onSubmit, onCancel }) {
    const intl = useIntl();
    const [currentYamlValue, setCurrentYamlValue] = useState(value);
    const onSave = () => onSubmit(currentYamlValue === "" ? undefined : currentYamlValue);
    const onSnippet = (snippet) => {
        if (currentYamlValue === "" || currentYamlValue === undefined) {
            setCurrentYamlValue(jsYaml.dump(snippet.value));
            return;
        }
        try {
            const currentYamlValueAsJson = jsYaml.load(currentYamlValue);
            const mergedJson = merge(currentYamlValueAsJson, snippet.value);
            setCurrentYamlValue(jsYaml.dump(mergedJson));
        }
        catch (e) {
            console.error("Merging of snippet with current value failed. Current value has a lint error.", e);
        }
    };
    return (_jsx(Overlay, { closeOnParentScroll: true, closeOnMouseDrag: true, closeOnOutsideClick: true, alignTo: ".gd-advanced-section", alignPoints: EDITOR_ALIGN_POINTS, onClose: onCancel, children: _jsx("div", { className: "gd-dropdown overlay", children: _jsxs("div", { className: "gd-advanced-customization-dialog", children: [_jsxs("div", { className: "gd-advanced-customization-dialog__header", children: [_jsx("span", { children: intl.formatMessage(messages["chartConfigOverrideTitle"]) }), _jsx("button", { className: "gd-button-link gd-button-icon-only gd-icon-cross", onClick: onCancel })] }), _jsxs("div", { className: "gd-advanced-customization-dialog__content", children: [_jsx("div", { className: "gd-advanced-customization-dialog__main", children: _jsx(CodeMirrorEditor, { value: currentYamlValue, onChange: setCurrentYamlValue }) }), _jsxs("div", { className: "gd-advanced-customization-dialog__snippets", children: [_jsxs("div", { className: "gd-advanced-customization-dialog__snippets--header", children: [_jsx("div", { children: intl.formatMessage(messages["snippetsHeader"]) }), _jsx("div", { className: "gd-advanced-customization-dialog__snippets--header__line" })] }), SNIPPETS.map((snippet) => snippet.type === "header" ? (_jsx(SnippetHeader, { snippet: snippet }, snippet.id)) : (_jsx(SnippetItem, { snippet: snippet, onClick: onSnippet }, snippet.id)))] })] }), _jsxs("div", { className: "gd-advanced-customization-dialog__footer", children: [_jsx(Hyperlink, { iconClass: "gd-icon-circle-question", href: "https://www.gooddata.com/docs/cloud/", text: intl.formatMessage(messages["chartConfigOverrideLink"]), className: "gd-chart-override-link" }), _jsxs("div", { children: [_jsx(Button, { className: "gd-button-secondary gd-button-small", onClick: onCancel, value: intl.formatMessage({
                                            id: "properties.advanced.chartConfigOverride.button.cancel",
                                        }) }), _jsx(Button, { className: "gd-button-action gd-button-small", onClick: onSave, value: intl.formatMessage({
                                            id: "properties.advanced.chartConfigOverride.button.apply",
                                        }) })] })] })] }) }) }));
}
//# sourceMappingURL=ConfigEditor.js.map