/*************************************************************/
/*                                                           */
/* Copyright (C) Microsoft Corporation. All rights reserved. */
/*                                                           */
/*************************************************************/

import Colors 1.0
import Fonts 1.0
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4

WizardTutorialPageBase {
    id: root
    anchors.fill: parent

    header.title.text: pageModel.usesTwoStateFileProviderIcons ?
                           _("FirstRunTutorialCloudFilesTitleMacbox") : _("FirstRunTutorialCloudFilesTitle")
    header.subtitle.text: pageModel.usesTwoStateFileProviderIcons ?
                              _("FirstRunTutorialCloudFilesSubtitleMacbox") : _("FirstRunTutorialCloudFilesSubtitle")
    header.subtitleTextAccessible: pageModel.usesTwoStateFileProviderIcons ?
                                       _("FirstRunTutorialCloudFilesSubtitleMacboxAccessible") : _("FirstRunTutorialCloudFilesSubtitle")

    header.image.visible: false
    nextButton.onClicked: pageModel.NextClicked();

    additionalContent.anchors.bottom: nextButton.top
    additionalContent.anchors.bottomMargin: 10
    additionalContent.data: Rectangle {
        anchors.fill: additionalContent
        width: 531
        color: "transparent"

        //  If this device is using three state file provider icons show the three-icon tutorial content.  Otherwise
        //  show the two-icon content below.
        Row {
            id: contentList
            visible: !pageModel.usesTwoStateFileProviderIcons
            width: childrenRect.width
            spacing: 45
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter

            IconWithTextAndDescription
            {
                image.source: Qt.platform.os === "osx" ?
                                  fullImageLocation + "FRE_Tutorial_FilesOnDemand_OnlineOnly_mac.svg" :
                                  fullImageLocation + "FRE_Tutorial_FilesOnDemand_OnlineOnly.svg"
                accessibleIconDescription: _("FirstRunTutorialCloudFilesOnlineImageAccessible")
                titleText.text: _("FirstRunTutorialCloudFilesOnlineTitle")
                subtitleText.text: _("FirstRunTutorialCloudFilesOnlineDescription")
            }

            IconWithTextAndDescription
            {
                image.source: Qt.platform.os === "osx" ?
                                  fullImageLocation + "FRE_Tutorial_FilesOnDemand_Placeholder_mac.svg" :
                                  fullImageLocation + "FRE_Tutorial_FilesOnDemand_Placeholder.svg"
                accessibleIconDescription: _("FirstRunTutorialCloudFilesAvailableImageAccessible")
                titleText.text: _("FirstRunTutorialCloudFilesAvailableTitle")
                subtitleText.text: _("FirstRunTutorialCloudFilesAvailableDescription")
            }

            IconWithTextAndDescription
            {
                image.source: Qt.platform.os === "osx" ?
                                  fullImageLocation + "FRE_Tutorial_FilesOnDemand_Important_mac.svg" :
                                  fullImageLocation + "FRE_Tutorial_FilesOnDemand_Important.svg"
                accessibleIconDescription: _("FirstRunTutorialCloudFilesImportantImageAccessible")
                titleText.text: _("FirstRunTutorialCloudFilesImportantTitle")
                subtitleText.text: _("FirstRunTutorialCloudFilesImportantDescription")
                accessibleSubtitleText: _("FirstRunTutorialCloudFilesImportantDescriptionAccessible")
            }
        }
        
        //  If this device is using two state file provider icons show the two-icon tutorial content.  Otherwise
        //  show the three-icon content above.
        Rectangle {
            id: contentListMacbox
            visible: pageModel.usesTwoStateFileProviderIcons

            anchors.top: parent.top
            anchors.topMargin: 24
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.bottom: parent.bottom

            color: "transparent"

            Image {
                id: fondDiagram
                fillMode: Image.PreserveAspectFit
                source: fullImageLocation + "FRE_Tutorial_FilesOnDemand_Macbox.svg"
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right

                sourceSize.width: 494
                sourceSize.height: 146
            }

            Rectangle {
                id: textContainer

                anchors.top: fondDiagram.bottom
                anchors.topMargin: 12
                anchors.left: parent.left
                anchors.right: parent.right
                height: childrenRect.height

                color: "transparent"

                Rectangle {
                    id: onlineOnlyGroup
                    Accessible.role: Accessible.Grouping

                    anchors.left: parent.left
                    anchors.top: parent.top

                    color: "transparent"
                    height: childrenRect.height
                    width: 216

                    Column {
                        width: 216
                        anchors.left: parent.left
                        anchors.top: parent.top

                        spacing: 12

                        Text {
                            width: parent.width
                            horizontalAlignment: Text.AlignHCenter
                            wrapMode: Text.WordWrap
                            renderType: Text.NativeRendering

                            color: Colors.common.text
                            font.pixelSize: 14
                            font.family: Fonts.semibold
                            font.styleName: "Semibold"

                            text: _("FirstRunTutorialCloudFilesOnlineTitleMacbox")
                            Accessible.role: Accessible.StaticText
                            Accessible.name: text
                        }

                        Text {
                            width: parent.width
                            horizontalAlignment: Text.AlignHCenter
                            wrapMode: Text.WordWrap
                            renderType: Text.NativeRendering

                            color: Colors.common.text_secondary
                            font.pixelSize: 12
                            font.family: Fonts.standard

                            text: _("FirstRunTutorialCloudFilesOnlineDescriptionMacbox")
                            Accessible.role: Accessible.StaticText
                            Accessible.name: text
                        }
                    }

                    Item {
                        anchors.bottom: parent.top

                        anchors.left: parent.left
                        anchors.leftMargin: 40
                        width: 70
                        height: 146

                        Accessible.role: Accessible.Graphic
                        Accessible.name: _("FirstRunTutorialCloudFilesOnlineImageAccessibleMacbox")
                    }
                }

                Rectangle {
                    id: availableOfflineGroup
                    Accessible.role: Accessible.Grouping

                    width: 216
                    anchors.right: parent.right
                    anchors.top: parent.top

                    color: "transparent"
                    height: childrenRect.height

                    Column {
                        width: 216
                        anchors.right: parent.right
                        anchors.top: parent.top

                        spacing: 12

                        Accessible.role: Accessible.Grouping

                        Text {
                            width: parent.width
                            horizontalAlignment: Text.AlignHCenter
                            wrapMode: Text.WordWrap
                            renderType: Text.NativeRendering

                            color: Colors.common.text
                            font.pixelSize: 14
                            font.family: Fonts.semibold
                            font.styleName: "Semibold"

                            text: _("FirstRunTutorialCloudFilesAlwaysAvailableTitleMacbox")
                            Accessible.role: Accessible.StaticText
                            Accessible.name: text
                        }

                        Text {
                            width: parent.width
                            horizontalAlignment: Text.AlignHCenter
                            wrapMode: Text.WordWrap
                            renderType: Text.NativeRendering

                            color: Colors.common.text_secondary
                            font.pixelSize: 12
                            font.family: Fonts.standard

                            text: _("FirstRunTutorialCloudFilesAlwaysAvailableDescriptionMacbox")
                            Accessible.role: Accessible.StaticText
                            Accessible.name: text
                        }
                    }

                    Item {
                        anchors.bottom: parent.top
                        anchors.right: parent.right
                        anchors.rightMargin: 30
                        width: 70
                        height: 146

                        Accessible.role: Accessible.Graphic
                        Accessible.name: _("FirstRunTutorialCloudFilesAlwaysAvailableImageAccessibleMacbox")
                    }
                }
            }
        }
    }
}