import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cloneDeep, set } from "lodash-es";
import { useIntl } from "react-intl";
import { getTranslation } from "../../utils/translations.js";
import { DisabledBubbleMessage } from "../DisabledBubbleMessage.js";
export function ConfigSubsection({ title, canBeToggled = false, toggleDisabled = false, toggledOn = true, pushData = () => { }, showDisabledMessage = false, valuePath, properties, axisType, children, }) {
    const intl = useIntl();
    const toggleValue = (event) => {
        if (valuePath && properties && pushData) {
            const clonedProperties = cloneDeep(properties);
            set(clonedProperties, `controls.${valuePath}`, event.target.checked);
            pushData({ properties: clonedProperties });
        }
    };
    const renderToggleSwitch = () => {
        if (canBeToggled) {
            return (_jsx(DisabledBubbleMessage, { className: "input-checkbox-toggle", showDisabledMessage: showDisabledMessage, children: _jsxs("label", { className: "s-checkbox-toggle-label", children: [
                        _jsx("input", { "aria-label": `${axisType} ${getTranslation(title, intl)}`, type: "checkbox", checked: toggledOn, disabled: toggleDisabled, onChange: toggleValue, className: "s-checkbox-toggle" }), _jsx("span", { className: "input-label-text" })
                    ] }) }));
        }
        return null;
    };
    const getTestClassName = () => {
        return `s-configuration-subsection-${title === undefined ? "empty-title" : title.replace(/\./g, "-")}`;
    };
    const className = `configuration-subsection ${getTestClassName()}`;
    return (_jsx("div", { className: className, "aria-label": "Configuration subsection", children: _jsxs("fieldset", { children: [
                _jsxs("legend", { children: [
                        _jsx("span", { className: "legend-title", children: getTranslation(title, intl) }), renderToggleSwitch()] }), _jsx("div", { children: children })
            ] }) }));
}
//# sourceMappingURL=ConfigSubsection.js.map