import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basic as Control
import Linphone
import SettingsCpp 1.0
import UtilsCpp
import 'qrc:/qt/qml/Linphone/view/Style/buttonStyle.js' as ButtonStyle
import "qrc:/qt/qml/Linphone/view/Control/Tool/Helper/utils.js" as Utils

AbstractSettingsLayout {
	id: mainItem
	width: parent?.width
	contentModel: [
		{
			//: Language
			title: qsTr("settings_display_language_title"),
			subTitle: "",
			contentComponent: languageComponent
		},
		{
			//: Appearance
			title: qsTr("settings_display_appearance_title"),
			subTitle: "",
			contentComponent: appearanceComponent
		}
	]

	onSave: {
		SettingsCpp.save()
	}
	onUndo: SettingsCpp.undo()

	// Language settings
	////////////////////

	Component {
		id: languageComponent
		ColumnLayout {
			spacing: Utils.getSizeWithScreenRatio(20)

			ComboSetting {
				Layout.fillWidth: true
				//: Language
				titleText: qsTr("settings_display_language_select")
				//: Select your preferred language
				subTitleText: qsTr("settings_display_language_subtitle")
				propertyName: "configLocale"
				propertyOwner: SettingsCpp
				model: [
					{text: "English", value: "en"},
					{text: "Deutsch", value: "de"},
					{text: "Francais", value: "fr"},
					{text: "Espanol", value: "es"},
					{text: "Portugues", value: "pt"},
					{text: "Italiano", value: "it"},
					{text: "Nederlands", value: "nl"},
					{text: "Polski", value: "pl"},
					{text: "Cesky", value: "cs"},
					{text: "Slovensky", value: "sk"},
					{text: "Magyar", value: "hu"},
					{text: "Suomi", value: "fi"},
					{text: "Russkiy", value: "ru"},
					{text: "Ukrayinska", value: "uk"},
					{text: "Zhongwen", value: "zh_Hans"}
				]
			}

			Text {
				Layout.fillWidth: true
				//: Restart required for language change
				text: qsTr("settings_display_language_restart_hint")
				color: DefaultStyle.main2_500main
				font.pixelSize: Typography.p2.pixelSize
				wrapMode: Text.WordWrap
			}
		}
	}

	// Appearance settings
	//////////////////////

	Component {
		id: appearanceComponent
		ColumnLayout {
			spacing: Utils.getSizeWithScreenRatio(20)

			SwitchSetting {
				Layout.fillWidth: true
				//: Dark mode
				titleText: qsTr("settings_display_dark_mode_title")
				//: Enable dark mode for the interface
				subTitleText: qsTr("settings_display_dark_mode_subtitle")
				propertyName: "darkModeAllowed"
				propertyOwner: SettingsCpp
			}

			ComboSetting {
				Layout.fillWidth: true
				//: Theme color
				titleText: qsTr("settings_display_theme_color_title")
				//: Choose the main color theme
				subTitleText: qsTr("settings_display_theme_color_subtitle")
				propertyName: "themeMainColor"
				propertyOwner: SettingsCpp
				model: [
					{text: "Green", value: "green"},
					{text: "Blue", value: "blue"},
					{text: "Orange", value: "orange"},
					{text: "Red", value: "red"},
					{text: "Purple", value: "purple"}
				]
			}
		}
	}
}