import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2025 GoodData Corporation
import { memo, useRef, useState } from "react";
import cx from "classnames";
import { cloneDeep, set } from "lodash-es";
import { useIntl } from "react-intl";
import { Button } from "@gooddata/sdk-ui-kit";
import { ConfigEditor } from "./ConfigEditor.js";
import { useOverflow } from "./useOverflow.js";
import { messages } from "../../../../locales.js";
import { ConfigSection } from "../ConfigSection.js";
export const AdvancedSection = memo(function AdvancedSection({ properties, propertiesMeta, pushData, controlsDisabled, }) {
    const intl = useIntl();
    const [showDialog, setShowDialog] = useState(false);
    const containerRef = useRef(null);
    const contentRef = useRef(null);
    const isOverflowing = useOverflow(containerRef.current, contentRef.current);
    const valuePath = "chartConfigOverride";
    const configurationValue = properties?.controls?.["chartConfigOverride"];
    const onChange = (value) => {
        const clonedProperties = cloneDeep(properties);
        set(clonedProperties, `controls.${valuePath}`, value);
        pushData?.({ properties: clonedProperties });
        setShowDialog(false);
    };
    return (_jsxs(_Fragment, { children: [showDialog ? (_jsx(ConfigEditor, { value: configurationValue, onSubmit: onChange, onCancel: () => setShowDialog(false) })) : null, _jsxs(ConfigSection, { id: "advanced_section", className: "gd-advanced-section", title: messages["advancedSection"].id, propertiesMeta: propertiesMeta, pushData: pushData, children: [configurationValue === undefined ? (_jsx("div", { className: "gd-chart-override-no-value", children: intl.formatMessage(messages["chartConfigOverrideNoValueLabel"]) })) : (_jsx("div", { ref: containerRef, className: cx("gd-chart-override-value-preview", {
                            "fade-out": isOverflowing,
                        }), children: _jsx("pre", { ref: contentRef, className: "gd-chart-override-value", children: configurationValue }) })), _jsx(Button, { iconLeft: "gd-icon-code", className: "gd-button gd-button-small gd-button-secondary", onClick: () => setShowDialog(!showDialog), disabled: controlsDisabled, children: intl.formatMessage(messages["chartConfigOverrideEditorButton"]) })
                ] })
        ] }));
});
//# sourceMappingURL=AdvancedSection.js.map