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") passwordItem.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: Math.round(21 * DefaultStyle.dp)
            Layout.leftMargin: Math.round(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: Math.round(34 * DefaultStyle.dp)
                Layout.preferredWidth: Math.round(34 * DefaultStyle.dp)
				colorizationColor: DefaultStyle.main2_600
			}
			Text {
				Layout.preferredWidth: width
				text: qsTr("Inscription")
				font {
                    pixelSize: Typography.h1.pixelSize
                    weight: Typography.h1.weight
				}
				wrapMode: Text.NoWrap
				scaleLettersFactor: 1.1
			}
		},
		Item {
			Layout.fillWidth: true
		},
		RowLayout {
            spacing: Math.round(20 * DefaultStyle.dp)
            Layout.rightMargin: Math.round(51 * DefaultStyle.dp)
			Text {
                Layout.rightMargin: Math.round(15 * DefaultStyle.dp)
				color: DefaultStyle.main2_700
				text: qsTr("Déjà un compte ?")
				font {
                    pixelSize: Typography.p1.pixelSize
                    weight: Typography.p1.weight
				}
			}
			BigButton {
				style: ButtonStyle.main
				text: qsTr("Connexion")
				onClicked: {
					console.debug("[RegisterPage] User: return")
					returnToLogin()
				}
			}
		}
	]

	centerContent: [
		ColumnLayout {
			anchors.fill: parent
            anchors.topMargin: Math.round(51 * DefaultStyle.dp)
            anchors.leftMargin: Math.round(127 * DefaultStyle.dp)
            anchors.rightMargin: Math.round(127 * DefaultStyle.dp)
            spacing: Math.round(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: Math.round(22 * DefaultStyle.dp)
					ColumnLayout {
                        spacing: Math.round(24 * DefaultStyle.dp)
						RowLayout {
							Layout.preferredHeight: usernameItem.height
                            spacing: Math.round(16 * DefaultStyle.dp)
							FormItemLayout {
								id: usernameItem
								label: qsTr("Username")
								mandatory: true
								enableErrorText: true
                                Layout.preferredWidth: Math.round(346 * DefaultStyle.dp)
								contentItem: TextField {
									id: usernameInput
									backgroundBorderColor: usernameItem.errorMessage.length > 0 ? DefaultStyle.danger_500main : DefaultStyle.grey_200
								}
							}
							RowLayout {
                                spacing: Math.round(10 * DefaultStyle.dp)
								ComboBox {
                                    Layout.preferredWidth: Math.round(210 * DefaultStyle.dp)
                                    Layout.preferredHeight: Math.round(49 * DefaultStyle.dp)
									enabled: false
									model: [{text:"@sip.linphone.org"}]
								}
								EffectImage {
                                    Layout.preferredWidth: Math.round(16 * DefaultStyle.dp)
                                    Layout.preferredHeight: Math.round(16 * DefaultStyle.dp)
									imageSource: AppIcons.lock
									colorizationColor: DefaultStyle.main2_600
								}
							}
						}
						StackLayout {
							currentIndex: bar.currentIndex
							PhoneNumberInput {
								id: phoneNumberInput
                                Layout.preferredWidth: Math.round(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: Math.round(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: Math.round(16 * DefaultStyle.dp)
								FormItemLayout {
									id: passwordItem
                                    Layout.preferredWidth: Math.round(346 * DefaultStyle.dp)
									label: qsTr("Mot de passe")
									mandatory: true
									enableErrorText: true
									contentItem: TextField {
										id: pwdInput
										hidden: true
                                        Layout.preferredWidth: Math.round(346 * DefaultStyle.dp)
										backgroundBorderColor: passwordItem.errorMessage.length > 0 ? DefaultStyle.danger_500main : DefaultStyle.grey_200
									}
								}
								FormItemLayout {
                                    Layout.preferredWidth: Math.round(346 * DefaultStyle.dp)
									label: qsTr("Confirmation mot de passe")
									mandatory: true
									enableErrorText: true
									contentItem: TextField {
										id: confirmPwdInput
										hidden: true
                                        Layout.preferredWidth: Math.round(346 * DefaultStyle.dp)
										backgroundBorderColor: passwordItem.errorMessage.length > 0 ? DefaultStyle.danger_500main : DefaultStyle.grey_200
									}
								}
							}
							TemporaryText {
								id: otherErrorText
								Layout.fillWidth: true
                                Layout.topMargin: Math.round(5 * DefaultStyle.dp)
								onTextChanged: console.log("set error", text) 
							}
						}
					}
					// ColumnLayout {
                    // 	spacing: Math.round(18 * DefaultStyle.dp)
					// 	RowLayout {
                    // 		spacing: Math.round(10 * DefaultStyle.dp)
					// 		CheckBox {
					// 			id: subscribeToNewsletterCheckBox
					// 		}
					// 		Text {
					// 			text: qsTr("Je souhaite souscrire à la newletter Linphone.")
					// 			font {
                    // 				pixelSize: Typography.p1.pixelSize
                    // 				weight: Typography.p1.weight
					// 			}
					// 			MouseArea {
					// 				anchors.fill: parent
					// 				onClicked: subscribeToNewsletterCheckBox.toggle()
					// 			}
					// 		}
					// 	}

					RowLayout {
                        spacing: Math.round(10 * DefaultStyle.dp)
						CheckBox {
							id: termsCheckBox
						}
						RowLayout {
							spacing: 0
							Layout.fillWidth: true
							Text {
								text: qsTr("J'accepte les ")
								font {
                                    pixelSize: Typography.p1.pixelSize
                                    weight: Typography.p1.weight
								}
								MouseArea {
									anchors.fill: parent
									onClicked: termsCheckBox.toggle()
								}
							}
							Text {
								activeFocusOnTab: true
								font {
									underline: true
                                    pixelSize: Typography.p1.pixelSize
                                    weight: Typography.p1.weight
									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: Typography.p1.pixelSize
                                    weight: Typography.p1.weight
								}
							}
							Text {
								activeFocusOnTab: true
								font {
									underline: true
                                    pixelSize: Typography.p1.pixelSize
                                    weight: Typography.p1.weight
									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: Math.round(129 * DefaultStyle.dp)
            anchors.rightMargin: Math.round(127 * DefaultStyle.dp)
            width: Math.round(395 * DefaultStyle.dp)
            height: Math.round(350 * DefaultStyle.dp)
			fillMode: Image.PreserveAspectFit
			source: AppIcons.loginImage
		}
	]
}