import QtQuick
import qs.Common
import qs.Widgets
import qs.Modules.Settings.Widgets

Item {
    id: localeTab

    readonly property string _systemDefaultLabel: I18n.tr("System Default")

    function _localeDisplayName(localeCode) {
        if (!I18n.presentLocales[localeCode])
            return;
        const nativeName = I18n.presentLocales[localeCode].nativeLanguageName;
        return nativeName[0].toUpperCase() + nativeName.slice(1);
    }

    function _allLocaleOptions() {
        return [_systemDefaultLabel].concat(Object.keys(I18n.presentLocales).map(_localeDisplayName));
    }

    function _codeForDisplayName(displayName) {
        if (displayName === _systemDefaultLabel)
            return "";
        for (const code of Object.keys(I18n.presentLocales)) {
            if (_localeDisplayName(code) === displayName)
                return code;
        }
        return "";
    }

    DankFlickable {
        anchors.fill: parent
        clip: true
        contentHeight: mainColumn.height + Theme.spacingXL
        contentWidth: width

        Column {
            id: mainColumn
            topPadding: 4
            width: Math.min(550, parent.width - Theme.spacingL * 2)
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: Theme.spacingXL

            SettingsCard {
                tab: "locale"
                tags: ["locale", "language", "country"]
                title: I18n.tr("Locale Settings")
                iconName: "language"

                SettingsDropdownRow {
                    id: localeDropdown
                    tab: "locale"
                    tags: ["locale", "language", "country"]
                    settingKey: "locale"
                    text: I18n.tr("Current Locale")
                    description: I18n.tr("Change the locale used by the DMS interface.")
                    options: localeTab._allLocaleOptions()
                    enableFuzzySearch: true

                    Component.onCompleted: {
                        currentValue = SessionData.locale ? localeTab._localeDisplayName(SessionData.locale) : localeTab._systemDefaultLabel;
                    }

                    onValueChanged: value => {
                        SessionData.set("locale", localeTab._codeForDisplayName(value));
                    }
                }

                SettingsDropdownRow {
                    id: timeLocaleDropdown
                    tab: "locale"
                    tags: ["locale", "time", "date", "format", "region"]
                    settingKey: "timeLocale"
                    text: I18n.tr("Time & Date Locale")
                    description: I18n.tr("Change the locale used for date and time formatting, independent of the interface language.")
                    options: localeTab._allLocaleOptions()
                    enableFuzzySearch: true

                    Component.onCompleted: {
                        currentValue = SessionData.timeLocale ? localeTab._localeDisplayName(SessionData.timeLocale) : localeTab._systemDefaultLabel;
                    }

                    onValueChanged: value => {
                        SessionData.set("timeLocale", localeTab._codeForDisplayName(value));
                    }
                }
            }
        }
    }
}