import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { HeightSetting } from "./HeightSetting.js";
import { ToggleSwitch } from "./ToggleSwitch.js";
/**
 * @internal
 */
export function CodeOptions({ option, onChange }) {
    const intl = useIntl();
    const onDisplayConfigurationChange = useCallback(() => {
        const opt = { ...option, displayConfiguration: !option.displayConfiguration };
        onChange(opt);
    }, [option, onChange]);
    const onCustomHeightChange = useCallback(() => {
        const opt = { ...option, customHeight: !option.customHeight };
        onChange(opt);
    }, [option, onChange]);
    const onHeightValueChange = useCallback((height, unit) => {
        const opt = { ...option, height, unit };
        onChange(opt);
    }, [option, onChange]);
    return (_jsxs("div", { className: "embed-insight-dialog-lang-selector", children: [
            _jsx("strong", { className: "bottom-space", children: _jsx(FormattedMessage, { id: "embedInsightDialog.react.options" }) }), _jsx(ToggleSwitch, { id: "display-configuration", className: "bottom-space", label: intl.formatMessage({
                    id: "embedInsightDialog.code.options.display.configuration",
                }), questionMarkMessage: intl.formatMessage({
                    id: "embedInsightDialog.code.options.include.config.info",
                }), checked: option.displayConfiguration, onChange: onDisplayConfigurationChange }), _jsx(ToggleSwitch, { id: "custom-height", label: intl.formatMessage({
                    id: "embedInsightDialog.code.options.custom.height",
                }), checked: option.customHeight, onChange: onCustomHeightChange }), option.customHeight ? (_jsx(HeightSetting, { value: option.height, unit: option.unit, onValueChange: onHeightValueChange })) : null] }));
}
