import '../../../globals.js';
import optionize from '../../../phet-core/js/optionize.js';
import { Node, RichText, Text, VBox } from '../../../scenery/js/imports.js';
import { supportedRegionAndCultureValues } from '../i18n/regionAndCultureProperty.js';
import joist from '../joist.js';
import JoistStrings from '../JoistStrings.js';
import LocalePanel from './LocalePanel.js';
import PreferencesControl from './PreferencesControl.js';
import PreferencesDialog from './PreferencesDialog.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 = JoistStrings.preferences.tabs.localization.titleStringProperty;
const regionAndCultureTitleStringProperty = JoistStrings.preferences.tabs.localization.regionAndCulture.titleStringProperty;
const regionAndCultureDescriptionStringProperty = JoistStrings.preferences.tabs.localization.regionAndCulture.descriptionStringProperty;
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: PreferencesDialog.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 Text(JoistStrings.preferences.tabs.localization.languageSelection.titleStringProperty, PreferencesDialogConstants.CONTROL_LABEL_OPTIONS);
            const localeDescription = new RichText(JoistStrings.preferences.tabs.localization.languageSelection.descriptionStringProperty, 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);
    }
}
joist.register('LocalizationPreferencesPanel', LocalizationPreferencesPanel);
export default LocalizationPreferencesPanel;
//# sourceMappingURL=LocalizationPreferencesPanel.js.map