import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2019-2025 GoodData Corporation
import { useCallback, useEffect, useMemo, useState } from "react";
import cx from "classnames";
import { cloneDeep, set } from "lodash-es";
import { useIntl } from "react-intl";
import { getTranslation } from "../../utils/translations.js";
import { DisabledBubbleMessage } from "../DisabledBubbleMessage.js";
export function ConfigSection({ id, valuePath, canBeToggled = false, toggleDisabled = false, toggledOn = true, propertiesMeta, properties = {}, title, subtitle, showDisabledMessage = false, className = "", pushData = () => { }, children, toggleMessageId, }) {
    const intl = useIntl();
    const [collapsed, setCollapsed] = useState(() => propertiesMeta?.[id]?.collapsed ?? true);
    useEffect(() => {
        // TODO: should the indexer be "nextProps.id"? Leaving as-is for now to be safe.
        const newCollapsed = propertiesMeta?.[id]?.collapsed ?? true;
        setCollapsed(newCollapsed);
    }, [propertiesMeta, id]);
    const toggleCollapsed = useCallback(() => {
        const propertiesMetaUpdate = {};
        propertiesMetaUpdate[id] = {
            collapsed: !collapsed,
        };
        setCollapsed(!collapsed);
        pushData({ propertiesMeta: propertiesMetaUpdate });
    }, [id, collapsed, pushData]);
    const toggleValue = useCallback((event) => {
        if (valuePath && properties && pushData) {
            const clonedProperties = cloneDeep(properties);
            set(clonedProperties, `controls.${valuePath}`, event.target.checked);
            pushData({ properties: clonedProperties });
        }
    }, [valuePath, properties, pushData]);
    const getToggleLabelClassNames = useMemo(() => cx("input-checkbox-toggle", "s-checkbox-toggle-label"), []);
    const renderToggleSwitch = useCallback(() => {
        if (canBeToggled) {
            return (_jsx(DisabledBubbleMessage, { className: "adi-bucket-item-toggle", showDisabledMessage: showDisabledMessage, messageId: toggleMessageId, children: _jsxs("label", { className: getToggleLabelClassNames, children: [_jsx("input", { "aria-label": id, type: "checkbox", checked: toggledOn, disabled: toggleDisabled, onChange: toggleValue, className: `s-checkbox-toggle ${toggleDisabled ? "s-disabled" : "s-enabled"}` }), _jsx("span", { className: "input-label-text" })] }) }));
        }
        return null;
    }, [
        canBeToggled,
        showDisabledMessage,
        toggleMessageId,
        getToggleLabelClassNames,
        id,
        toggledOn,
        toggleDisabled,
        toggleValue,
    ]);
    const headerClassNames = useMemo(() => cx("adi-bucket-item-header", "adi-configuration-section-header", "s-configuration-panel-item-header", {
        expanded: !collapsed,
        "adi-bucket-item-header-has-toggle": canBeToggled,
        collapsed,
    }), [collapsed, canBeToggled]);
    const sectionClassNames = useMemo(() => cx("adi-bucket-item", `s-config-section-${id}`), [id]);
    const configSectionClassName = useMemo(() => `adi-bucket-configuration ${className}`, [className]);
    return (_jsxs("div", { className: sectionClassNames, "aria-label": "Configuration section", children: [_jsx("div", { className: headerClassNames, onClick: toggleCollapsed, children: getTranslation(title, intl) + (subtitle ? ` (${getTranslation(subtitle, intl)})` : "") }), renderToggleSwitch(), _jsx("div", { className: configSectionClassName, children: !collapsed && children })] }));
}
//# sourceMappingURL=ConfigSection.js.map