import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2023-2026 GoodData Corporation
import { useCallback } from "react";
import { messages } from "../../../locales.js";
import { ModeSelectItem } from "./ConfigurationModeSelectItem.js";
const ACTIVE_MODE = "active";
const READONLY_MODE = "readonly";
const HIDDEN_MODE = "hidden";
export function ConfigModeSelect({ selectedMode, onChanged, intl }) {
    const onCheck = useCallback((e) => {
        const value = e.target.value;
        onChanged(value);
    }, [onChanged]);
    const activeTitle = intl.formatMessage(messages.filterConfigurationModeActiveTitle);
    const readOnlyTitle = intl.formatMessage(messages.filterConfigurationModeReadOnlyTitle);
    const hiddenTitle = intl.formatMessage(messages.filterConfigurationModeHiddenTitle);
    const activeTooltip = intl.formatMessage(messages.filterConfigurationModeActiveTooltip);
    const readOnlyTooltip = intl.formatMessage(messages.filterConfigurationModeReadOnlyTooltip);
    const hiddenTooltip = intl.formatMessage(messages.filterConfigurationModeHiddenTooltip);
    return (_jsxs("div", { className: "configuration-item-mode s-configuration-item-mode", children: [
            _jsx(ModeSelectItem, { className: "config-state-active s-config-state-active", itemText: activeTitle, itemValue: ACTIVE_MODE, onChange: onCheck, checked: selectedMode === ACTIVE_MODE, itemTooltip: activeTooltip }), _jsx(ModeSelectItem, { className: "config-state-readonly s-config-state-readonly", itemText: readOnlyTitle, itemValue: READONLY_MODE, onChange: onCheck, checked: selectedMode === READONLY_MODE, itemTooltip: readOnlyTooltip }), _jsx(ModeSelectItem, { className: "config-state-hidden s-config-state-hidden", itemText: hiddenTitle, itemValue: HIDDEN_MODE, onChange: onCheck, checked: selectedMode === HIDDEN_MODE, itemTooltip: hiddenTooltip })
        ] }));
}
