import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basic as Control

import Linphone
import 'qrc:/qt/qml/Linphone/view/Style/buttonStyle.js' as ButtonStyle

LoginLayout {
	id: mainItem
	signal startButtonPressed()

	titleContent: [
		Text {
			id: welcome
			text: qsTr("Bienvenue")
			Layout.alignment: Qt.AlignVCenter
            Layout.leftMargin: Math.round(132 * DefaultStyle.dp)
			color: DefaultStyle.main2_800
			font {
                pixelSize: Math.round(96 * DefaultStyle.dp)
                weight: Typography.h4.weight
            }
			scaleLettersFactor: 1.1
		},
		Text {
			Layout.alignment: Qt.AlignBottom
            Layout.leftMargin: Math.round(29 * DefaultStyle.dp)
            Layout.bottomMargin: Math.round(19 * DefaultStyle.dp)
			color: DefaultStyle.main2_800
			text: qsTr("sur Linphone")
			font {
                pixelSize: Typography.h1.pixelSize
                weight: Typography.h1.weight
			}
			scaleLettersFactor: 1.1
		},
		Item {
			Layout.fillWidth: true
		},
		SmallButton {
			visible: carousel.currentIndex < (carousel.itemsCount - 1)
			flat: true
            Layout.rightMargin: Math.round(50 * DefaultStyle.dp)
			Layout.alignment: Qt.AlignVCenter | Layout.AlignRight
			style: ButtonStyle.noBackground
			text: qsTr("Passer")
			underline: true
			onClicked: {
				console.debug("[WelcomePage] User: Click skip")
				mainItem.startButtonPressed()
			}
		}
	]
	centerContent: ColumnLayout {
        spacing: Math.round(76 * DefaultStyle.dp)
		anchors.left: parent.left
		anchors.top: parent.top
        anchors.leftMargin: Math.round(308 * DefaultStyle.dp)
        anchors.topMargin: Math.round(166 * DefaultStyle.dp)

		RowLayout {
			id: carouselLayout
            spacing: Math.round(76 * DefaultStyle.dp)
			Image {
				id: carouselImg
                // Layout.rightMargin: Math.round(40 * DefaultStyle.dp)
                Layout.preferredWidth: Math.round(153.22 * DefaultStyle.dp)
                Layout.preferredHeight: Math.round(155.9 * DefaultStyle.dp)
				fillMode: Image.PreserveAspectFit
				source: carousel.currentIndex == 0 ? AppIcons.welcomeLinphoneLogo : carousel.currentIndex == 1 ? AppIcons.welcomeLock : AppIcons.welcomeOpenSource
			}
			Carousel {
				id: carousel
                Layout.leftMargin: Math.round(75.78 * DefaultStyle.dp)
				itemsCount: slideRepeater.count
				itemsList: Repeater {
					id: slideRepeater
					model: [
					{title: qsTr("Linphone"), text: qsTr("Une application de communication <b>sécurisée</b>,<br> <b>open source</b> et <b>française</b>.")},
					{title: qsTr("Sécurisé"), text: qsTr("Vos communications sont en sécurité grâce aux <br><b>Chiffrement de bout en bout</b>.")},
					{title: qsTr("Open Source"), text: qsTr("Une application open source et un <b>service gratuit</b> <br>depuis <b>2001</b>")}
					]
					ColumnLayout {
                        spacing: Math.round(10 * DefaultStyle.dp)
						Text {
							id: title
							text: modelData.title
							font {
                                pixelSize: Typography.h2.pixelSize
                                weight: Typography.h2.weight
							}
						}
						Text {
							id: txt
                            Layout.maximumWidth: Math.round(361 * DefaultStyle.dp)
                            wrapMode: Text.WordWrap
                            font {
                                pixelSize: Typography.p1.pixelSize
                                weight: Typography.p1.weight
                            }
							text: modelData.text
						}
					}
				}
			}
		}

		BigButton {
            Layout.leftMargin: Math.round(509 * DefaultStyle.dp)
			style: ButtonStyle.main
			text: carousel.currentIndex < (carousel.itemsCount - 1) ? qsTr("Suivant") : qsTr("Commencer")
			onClicked: {
				if (carousel.currentIndex < carousel.itemsCount - 1) carousel.goToSlide(carousel.currentIndex + 1);
				else mainItem.startButtonPressed();
			}
		}
	}
}