// Copyright 2022-2025, University of Colorado Boulder
/**
 * The content for the "Localization" tab in the PreferencesDialog.
 *
 * This is still being designed and developed. We expect it to contain a UI component to change the
 * language on the fly when running in the "_all" file. There may also be controls to change out
 * a character set or other artwork to match certain cultures or regions.
 *
 * @author Jesse Greenberg (PhET Interactive Simulations)
 */
import { string_joist_preferences_tabs_localization_title_StringProperty } from '../strings/preferences/tabs/localization/title.js';
import { string_joist_preferences_tabs_localization_regionAndCulture_title_StringProperty } from '../strings/preferences/tabs/localization/regionAndCulture/title.js';
import { string_joist_preferences_tabs_localization_regionAndCulture_description_StringProperty } from '../strings/preferences/tabs/localization/regionAndCulture/description.js';
import { string_joist_preferences_tabs_localization_languageSelection_title_StringProperty } from '../strings/preferences/tabs/localization/languageSelection/title.js';
import { string_joist_preferences_tabs_localization_languageSelection_description_StringProperty } from '../strings/preferences/tabs/localization/languageSelection/description.js';
import '../../../globals.js';
import optionize, { combineOptions } from '../../../phet-core/js/optionize.js';
import VoicingRichText from '../../../scenery/js/accessibility/voicing/nodes/VoicingRichText.js';
import VoicingText from '../../../scenery/js/accessibility/voicing/nodes/VoicingText.js';
import VBox from '../../../scenery/js/layout/nodes/VBox.js';
import Node from '../../../scenery/js/nodes/Node.js';
import RichText from '../../../scenery/js/nodes/RichText.js';
import Text from '../../../scenery/js/nodes/Text.js';
import { supportedRegionAndCultureValues } from '../i18n/regionAndCultureProperty.js';
import LocalePanel from './LocalePanel.js';
import PreferencesControl from './PreferencesControl.js';
import PreferencesDialogConstants from './PreferencesDialogConstants.js';
import PreferencesPanel from './PreferencesPanel.js';
import PreferencesPanelSection from './PreferencesPanelSection.js';
import PreferencesType from './PreferencesType.js';
import RegionAndCultureComboBox from './RegionAndCultureComboBox.js';
// constants
const localizationTitleStringProperty = string_joist_preferences_tabs_localization_title_StringProperty;
const regionAndCultureTitleStringProperty = string_joist_preferences_tabs_localization_regionAndCulture_title_StringProperty;
const regionAndCultureDescriptionStringProperty = string_joist_preferences_tabs_localization_regionAndCulture_description_StringProperty;
class LocalizationPreferencesPanel extends PreferencesPanel {
    constructor(localizationModel, selectedTabProperty, tabVisibleProperty, providedOptions) {
        const options = optionize()({
            labelContent: localizationTitleStringProperty,
            phetioVisiblePropertyInstrumented: false
        }, providedOptions);
        super(PreferencesType.LOCALIZATION, selectedTabProperty, tabVisibleProperty, options);
        const contentNode = new VBox({
            spacing: PreferencesDialogConstants.CONTENT_SPACING
        });
        // Add 'Region and Culture' combo box if there are at least 2 values.
        if (supportedRegionAndCultureValues.length > 1) {
            const comboBox = new RegionAndCultureComboBox();
            const labelNode = new Text(regionAndCultureTitleStringProperty, PreferencesDialogConstants.CONTROL_LABEL_OPTIONS);
            const descriptionNode = new RichText(regionAndCultureDescriptionStringProperty, PreferencesDialogConstants.CONTROL_DESCRIPTION_OPTIONS);
            contentNode.addChild(new PreferencesControl({
                labelNode: labelNode,
                controlNode: comboBox,
                descriptionNode: descriptionNode
            }));
        }
        if (localizationModel.supportsDynamicLocale && localizationModel.includeLocalePanel) {
            // The language selection provided by LocalePanel does not follow the PreferencesControl pattern because it is a
            // much larger custom UI component that does not fit in the standard PreferencesControl layout.
            const localeLabel = new VoicingText(string_joist_preferences_tabs_localization_languageSelection_title_StringProperty, combineOptions({}, PreferencesDialogConstants.CONTROL_LABEL_OPTIONS, {
                readingBlockDisabledTagName: 'h3'
            }));
            const localeDescription = new VoicingRichText(string_joist_preferences_tabs_localization_languageSelection_description_StringProperty, PreferencesDialogConstants.CONTROL_DESCRIPTION_OPTIONS);
            const localePanel = new LocalePanel(localizationModel.localeProperty);
            const localeVBox = new VBox({
                children: [localeLabel, localeDescription, localePanel],
                align: 'left',
                spacing: 5,
                stretch: true,
                layoutOptions: {
                    stretch: true
                }
            });
            contentNode.addChild(localeVBox);
        }
        localizationModel.customPreferences.forEach(customPreference => {
            const customContent = customPreference.createContent(providedOptions.tandem);
            contentNode.addChild(new Node({
                children: [customContent]
            }));
        });
        // center align within this content if there is only one item, otherwise left align all items
        contentNode.align = contentNode.children.length > 1 ? 'left' : 'center';
        const panelSection = new PreferencesPanelSection({
            contentNode: contentNode,
            // Without a title no indentation is necessary
            contentLeftMargin: 0
        });
        this.addChild(panelSection);
    }
}
export default LocalizationPreferencesPanel;
//# sourceMappingURL=LocalizationPreferencesPanel.js.map