import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2023-2026 GoodData Corporation
import { useCallback } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { dialogChangeMessageLabels } from "../../../../locales.js";
import { HeightSetting } from "./HeightSetting.js";
import { LocaleSetting } from "./LocaleSetting.js";
import { ToggleSwitch } from "./ToggleSwitch.js";
/**
 * @internal
 */
export function WebComponentsOptions({ option, onChange }) {
    const intl = useIntl();
    const onDisplayTitleChange = useCallback(() => {
        const opt = { ...option, displayTitle: !option.displayTitle };
        onChange(opt);
    }, [option, onChange]);
    const onCustomTitleChange = useCallback(() => {
        const opt = { ...option, customTitle: !option.customTitle };
        onChange(opt);
    }, [option, onChange]);
    const onAllowLocaleChange = useCallback(() => {
        const opt = { ...option, allowLocale: !option.allowLocale };
        onChange(opt);
    }, [option, onChange]);
    const onLocaleValueChange = useCallback((locale) => {
        const opt = { ...option, locale };
        onChange(opt);
    }, [option, onChange]);
    const onCustomHeightChange = useCallback(() => {
        const opt = { ...option, customHeight: !option.customHeight };
        onChange(opt);
    }, [option, onChange]);
    const onCustomHeightValueChange = 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.webComponents.options" }) }), _jsx(ToggleSwitch, { id: "display-title", className: "bottom-space", label: intl.formatMessage({
                    id: "embedInsightDialog.webComponents.options.displayTitle",
                }), checked: option.displayTitle, onChange: onDisplayTitleChange }), _jsx(ToggleSwitch, { id: "custom-title", className: "bottom-space", label: intl.formatMessage({
                    id: "embedInsightDialog.webComponents.options.customTitle",
                }), checked: option.customTitle, disabled: !option.displayTitle, onChange: onCustomTitleChange, questionMarkMessage: intl.formatMessage(option.displayTitle
                    ? dialogChangeMessageLabels.customTitle
                    : dialogChangeMessageLabels.disabledCustomTitle) }), _jsx(LocaleSetting, { isChecked: option.allowLocale, selectedLocal: option.locale, onChecked: onAllowLocaleChange, onLocaleSelected: onLocaleValueChange }), _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: onCustomHeightValueChange })) : null] }));
}
