import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basic as Control
import Linphone
import UtilsCpp 1.0
import ConstantsCpp 1.0
import 'qrc:/qt/qml/Linphone/view/Style/buttonStyle.js' as ButtonStyle

LoginLayout {
	id: mainItem
	signal returnToLogin()
	signal browserValidationRequested()
	readonly property string countryCode: phoneNumberInput.countryCode
	readonly property string phoneNumber: phoneNumberInput.phoneNumber
	readonly property string email: emailInput.text

	Connections {
		target: RegisterPageCpp
		function onErrorInField(field, errorMessage) {
			console.log("set error message", errorMessage)
			if (field == "username") usernameItem.errorMessage = errorMessage
			else if (field == "password") pwdItem.errorMessage = errorMessage
			else if (field == "phone") phoneNumberInput.errorMessage = errorMessage
			else if (field == "email") emailItem.errorMessage = errorMessage
			else otherErrorText.setText(errorMessage)
		}
		function onRegisterNewAccountFailed(errorMessage) {
			console.log("register failed", errorMessage)
			otherErrorText.setText(errorMessage)
		}
	}

	titleContent: [
		RowLayout {
			spacing: 21 * DefaultStyle.dp
			Layout.leftMargin: 79 * DefaultStyle.dp
			BigButton {
				style: ButtonStyle.noBackground
				icon.source: AppIcons.leftArrow
				onClicked: {
					console.debug("[RegisterPage] User: return")
					returnToLogin()
				}
			}
			EffectImage {
				fillMode: Image.PreserveAspectFit
				imageSource: AppIcons.profile
				Layout.preferredHeight: 34 * DefaultStyle.dp
				Layout.preferredWidth: 34 * DefaultStyle.dp
				colorizationColor: DefaultStyle.main2_600
			}
			Text {
				Layout.preferredWidth: width
				text: qsTr("Inscription")
				font {
					pixelSize: 36 * DefaultStyle.dp
					weight: 800 * DefaultStyle.dp
				}
				wrapMode: Text.NoWrap
				scaleLettersFactor: 1.1
			}
		},
		Item {
			Layout.fillWidth: true
		},
		RowLayout {
			spacing: 20 * DefaultStyle.dp
			Layout.rightMargin: 51 * DefaultStyle.dp
			Text {
				Layout.rightMargin: 15 * DefaultStyle.dp
				color: DefaultStyle.main2_700
				text: qsTr("Déjà un compte ?")
				font {
					pixelSize: 14 * DefaultStyle.dp
					weight: 400 * DefaultStyle.dp
				}
			}
			BigButton {
				style: ButtonStyle.main
				text: qsTr("Connexion")
				onClicked: {
					console.debug("[RegisterPage] User: return")
					returnToLogin()
				}
			}
		}
	]

	centerContent: [
		ColumnLayout {
			anchors.fill: parent
			anchors.topMargin: 51 * DefaultStyle.dp
			anchors.leftMargin: 127 * DefaultStyle.dp
			anchors.rightMargin: 127 * DefaultStyle.dp
			spacing: 50 * DefaultStyle.dp
			TabBar {
				Layout.fillWidth: true
				id: bar
				model: [qsTr("Register with phone number"), qsTr("Register with email")]
			}
			Flickable {
				Layout.fillWidth: true
				Layout.fillHeight: true
				ColumnLayout {
					anchors.left: parent.left
					anchors.right: parent.right
					spacing: 22 * DefaultStyle.dp
					ColumnLayout {
						spacing: 24 * DefaultStyle.dp
						RowLayout {
							Layout.preferredHeight: usernameItem.height
							spacing: 16 * DefaultStyle.dp
							FormItemLayout {
								id: usernameItem
								label: qsTr("Username")
								mandatory: true
								enableErrorText: true
								Layout.preferredWidth: 346 * DefaultStyle.dp
								contentItem: TextField {
									id: usernameInput
									backgroundBorderColor: usernameItem.errorMessage.length > 0 ? DefaultStyle.danger_500main : DefaultStyle.grey_200
								}
							}
							RowLayout {
								spacing: 10 * DefaultStyle.dp
								ComboBox {
									Layout.preferredWidth: 210 * DefaultStyle.dp
									Layout.preferredHeight: 49 * DefaultStyle.dp
									enabled: false
									model: [{text:"@sip.linphone.org"}]
								}
								EffectImage {
									Layout.preferredWidth: 16 * DefaultStyle.dp
									Layout.preferredHeight: 16 * DefaultStyle.dp
									imageSource: AppIcons.lock
									colorizationColor: DefaultStyle.main2_600
								}
							}
						}
						StackLayout {
							currentIndex: bar.currentIndex
							PhoneNumberInput {
								id: phoneNumberInput
								Layout.preferredWidth: 346 * DefaultStyle.dp
								property string completePhoneNumber: countryCode + phoneNumber
								label: qsTr("Numéro de téléphone")
								enableErrorText: true
								mandatory: true
								placeholderText: "Phone number"
								defaultCallingCode: "33"
							}
							FormItemLayout {
								id: emailItem
								Layout.fillWidth: false
								Layout.preferredWidth: 346 * DefaultStyle.dp
								label: qsTr("Email")
								mandatory: true
								enableErrorText: true
								contentItem: TextField {
									id: emailInput
									backgroundBorderColor: emailItem.errorMessage.length > 0 ? DefaultStyle.danger_500main : DefaultStyle.grey_200
								}
							}
						}
						ColumnLayout {
							spacing: 0
							Layout.preferredHeight: rowlayout.height
							clip: false
							RowLayout {
								id: rowlayout
								spacing: 16 * DefaultStyle.dp
								FormItemLayout {
									id: passwordItem
									Layout.preferredWidth: 346 * DefaultStyle.dp
									label: qsTr("Mot de passe")
									mandatory: true
									enableErrorText: true
									contentItem: TextField {
										id: pwdInput
										hidden: true
										Layout.preferredWidth: 346 * DefaultStyle.dp
										backgroundBorderColor: passwordItem.errorMessage.length > 0 ? DefaultStyle.danger_500main : DefaultStyle.grey_200
									}
								}
								FormItemLayout {
									Layout.preferredWidth: 346 * DefaultStyle.dp
									label: qsTr("Confirmation mot de passe")
									mandatory: true
									enableErrorText: true
									contentItem: TextField {
										id: confirmPwdInput
										hidden: true
										Layout.preferredWidth: 346 * DefaultStyle.dp
										backgroundBorderColor: passwordItem.errorMessage.length > 0 ? DefaultStyle.danger_500main : DefaultStyle.grey_200
									}
								}
							}
							TemporaryText {
								id: otherErrorText
								Layout.fillWidth: true
								Layout.topMargin: 5 * DefaultStyle.dp
								onTextChanged: console.log("set error", text) 
							}
						}
					}
					// ColumnLayout {
					// 	spacing: 18 * DefaultStyle.dp
					// 	RowLayout {
					// 		spacing: 10 * DefaultStyle.dp
					// 		CheckBox {
					// 			id: subscribeToNewsletterCheckBox
					// 		}
					// 		Text {
					// 			text: qsTr("Je souhaite souscrire à la newletter Linphone.")
					// 			font {
					// 				pixelSize: 14 * DefaultStyle.dp
					// 				weight: 400 * DefaultStyle.dp
					// 			}
					// 			MouseArea {
					// 				anchors.fill: parent
					// 				onClicked: subscribeToNewsletterCheckBox.toggle()
					// 			}
					// 		}
					// 	}

					RowLayout {
						spacing: 10 * DefaultStyle.dp
						CheckBox {
							id: termsCheckBox
						}
						RowLayout {
							spacing: 0
							Layout.fillWidth: true
							Text {
								text: qsTr("J'accepte les ")
								font {
									pixelSize: 14 * DefaultStyle.dp
									weight: 400 * DefaultStyle.dp
								}
								MouseArea {
									anchors.fill: parent
									onClicked: termsCheckBox.toggle()
								}
							}
							Text {
								activeFocusOnTab: true
								font {
									underline: true
									pixelSize: 14 * DefaultStyle.dp
									weight: 400 * DefaultStyle.dp
									bold: activeFocus
								}
								text: qsTr("conditions d’utilisation")
								Keys.onPressed: (event)=> {
									if (event.key == Qt.Key_Space || event.key == Qt.Key_Enter || event.key == Qt.Key_Return) {
										cguMouseArea.clicked(undefined)
										event.accepted = true;
									}
								}
								MouseArea {
									id: cguMouseArea
									anchors.fill: parent
									hoverEnabled: true
									cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
									onClicked: Qt.openUrlExternally(ConstantsCpp.CguUrl)
								}
							}
							Text {
								text: qsTr(" et la ")
								font {
									pixelSize: 14 * DefaultStyle.dp
									weight: 400 * DefaultStyle.dp
								}
							}
							Text {
								activeFocusOnTab: true
								font {
									underline: true
									pixelSize: 14 * DefaultStyle.dp
									weight: 400 * DefaultStyle.dp
									bold: activeFocus
								}
								text: qsTr("politique de confidentialité.")
								Keys.onPressed: (event)=> {
									if (event.key == Qt.Key_Space || event.key == Qt.Key_Enter || event.key == Qt.Key_Return) {
										privateMouseArea.clicked(undefined)
										event.accepted = true;
									}
								}
								MouseArea {
									id: privateMouseArea
									anchors.fill: parent
									hoverEnabled: true
									cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
									onClicked: Qt.openUrlExternally(ConstantsCpp.PrivatePolicyUrl)
								}
							}
						}
					}
					// }
					Button {
						enabled: termsCheckBox.checked
						style: ButtonStyle.main
						text: qsTr("Créer")
						onClicked:{
							if (usernameInput.text.length === 0) {
								console.log("ERROR username")
								usernameItem.errorMessage = qsTr("Veuillez entrer un nom d'utilisateur")
							} else if (pwdInput.text.length === 0) {
								console.log("ERROR password")
								passwordItem.errorMessage = qsTr("Veuillez entrer un mot de passe")
							} else if (pwdInput.text != confirmPwdInput.text) {
								console.log("ERROR confirm pwd")
								passwordItem.errorMessage = qsTr("Les mots de passe sont différents")
							} else if (bar.currentIndex === 0 && phoneNumberInput.phoneNumber.length === 0) {
								console.log("ERROR phone number")
								phoneNumberInput.errorMessage = qsTr("Veuillez entrer un numéro de téléphone")
							} else if (bar.currentIndex === 1 && emailInput.text.length === 0) {
								console.log("ERROR email")
								emailItem.errorMessage = qsTr("Veuillez entrer un email")
							} else {
								console.log("[RegisterPage] User: Call register")
								mainItem.browserValidationRequested()
								if (bar.currentIndex === 0)
									RegisterPageCpp.registerNewAccount(usernameInput.text, pwdInput.text, "", phoneNumberInput.completePhoneNumber)
								else
									RegisterPageCpp.registerNewAccount(usernameInput.text, pwdInput.text, emailInput.text, "")
							}
						}
					}
				}
			}
		},
		Image {
			z: -1
			anchors.top: parent.top
			anchors.right: parent.right
			anchors.topMargin: 129 * DefaultStyle.dp
			anchors.rightMargin: 127 * DefaultStyle.dp
			width: 395 * DefaultStyle.dp
			height: 350 * DefaultStyle.dp
			fillMode: Image.PreserveAspectFit
			source: AppIcons.loginImage
		}
	]
}
 
