import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2023-2026 GoodData Corporation
import { useCallback } from "react";
import { useIntl } from "react-intl";
import { LOCALES } from "@gooddata/sdk-ui";
import { Dropdown } from "../../../../Dropdown/Dropdown.js";
import { DropdownButton } from "../../../../Dropdown/DropdownButton.js";
import { DropdownList } from "../../../../Dropdown/DropdownList.js";
import { SingleSelectListItem } from "../../../../List/ListItem.js";
import { dialogChangeMessageLabels } from "../../../../locales.js";
import { DEFAULT_LOCALE } from "../types.js";
import { ToggleSwitch } from "./ToggleSwitch.js";
/**
 * @internal
 */
export function LocaleSetting({ isChecked, selectedLocal, onChecked, onLocaleSelected, }) {
    const intl = useIntl();
    return (_jsxs(_Fragment, { children: [
            _jsx(ToggleSwitch, { id: "locale", className: "bottom-space", label: intl.formatMessage({
                    id: "embedInsightDialog.webComponents.options.locale",
                }), checked: isChecked, onChange: onChecked, questionMarkMessage: intl.formatMessage(dialogChangeMessageLabels.locale) }), isChecked ? (_jsx(LocaleSelect, { selectedLocale: selectedLocal || DEFAULT_LOCALE, onSelectLocale: onLocaleSelected })) : null] }));
}
const localeItems = LOCALES.map((u) => ({ id: u, title: u }));
function LocaleSelect({ selectedLocale, onSelectLocale }) {
    const renderDropdownBody = useCallback(({ closeDropdown }) => {
        return (_jsx(DropdownList, { items: localeItems, width: 60, renderItem: ({ item }) => {
                return (_jsx(SingleSelectListItem, { title: item.title, isSelected: item.id === selectedLocale, onClick: () => {
                        onSelectLocale(item.id);
                        closeDropdown();
                    } }));
            } }));
    }, [onSelectLocale, selectedLocale]);
    const renderDropdownButton = useCallback(({ openDropdown, isOpen }) => {
        return _jsx(DropdownButton, { value: selectedLocale, isOpen: isOpen, onClick: openDropdown });
    }, [selectedLocale]);
    return (_jsx("div", { className: "locale-setting-component bottom-space", children: _jsx(Dropdown, { renderBody: renderDropdownBody, renderButton: renderDropdownButton }) }));
}
