/*
 *   Copyright 2014 Marco Martin <mart@kde.org>
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License version 2,
 *   or (at your option) any later version, as published by the Free
 *   Software Foundation
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   GNU General Public License for more details
 *
 *   You should have received a copy of the GNU General Public
 *   License along with this program; if not, write to the
 *   Free Software Foundation, Inc.,
 *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */

import QtQuick 2.5
import QtGraphicalEffects 1.0

Image {
    id: root
    source: "images/background.jpg"
    fillMode: Image.PreserveAspectCrop
    
    property int stage

    onStageChanged: {
        if (stage == 2) {
            inOpacityAnimationContent.running = true;
            inOpacityAnimationBusyIndicator.running = true;
        }

        else if (stage == 2) {
            lineAnimation.running = true;
        }

        else if (stage == 3) {
            lineAnimation.running = true;
            // timerOpacityAnimationLoadingText.start();
        }

        else if (stage == 4) {
            lineAnimation.running = true;
        }

        else if (stage == 5) {
            outOpacityAnimationBusyIndicator.running = true;
            outOpacityAnimationContent.running = true;
        }
    }

    Item {
        id: content
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0
        anchors.fill: parent
        opacity: 0
        TextMetrics {
            id: units
            text: "M"
            property int gridUnit: boundingRect.height
            property int largeSpacing: units.gridUnit
            property int smallSpacing: Math.max(2, gridUnit/4)
        }

        Image {
            id: logo
            property real size: units.gridUnit * 12
            anchors.centerIn: parent
            source: ""
            sourceSize.width: size
            sourceSize.height: size
        }
        
        Row {
            spacing: units.smallSpacing*2
            anchors {
                bottom: parent.bottom
                right: parent.right
                rightMargin: units.gridUnit * 15
                bottomMargin: units.gridUnit * 13
                margins: units.gridUnit
            }
            Text {
                id: date1
                text:Qt.formatDateTime(new Date(),"dddd, hh:mm")
                font.pointSize: 32
                color: "#e92222"
                opacity:0.85
                font { family: "NotoSans"; weight: Font.Medium ;capitalization: Font.Capitalize}
                anchors.horizontalCenter: parent.horizontalCenter
                y: (parent.height - height) / 1.2
            }
        }

        Row {
            spacing: units.smallSpacing*2
            anchors {
                bottom: parent.bottom
                right: parent.right
                rightMargin: units.gridUnit * 15
                bottomMargin: units.gridUnit * 10
                margins: units.gridUnit
            }
            Text {
                id: date2
                text:Qt.formatDateTime(new Date(),"yyyy.MM.dd")
                font.pointSize: 32
                color: "#e92222"
                opacity:0.85
                font { family: "NotoSans"; weight: Font.Medium ;capitalization: Font.Capitalize}
                anchors.horizontalCenter: parent.horizontalCenter
                y: (parent.height - height) / 1.1
            }
        }

        Image {
            id: busyIndicator
            //in the middle of the remaining space
            //y: (parent.height - height) / 1.7
            y: root.height - (root.height - logo.y) / 1.1 - height/2
            anchors.horizontalCenter: parent.horizontalCenter
            source: "images/start.svg"
            opacity: 0
            sourceSize.height: units.gridUnit * 15.0
            sourceSize.width: units.gridUnit * 15.0
            RotationAnimator on rotation {
                id: rotationAnimator1
                from: 0
                to: 0
                duration: 1100
                loops: Animation.Infinite
            }
        }
        
        Row {
            spacing: units.smallSpacing*2
            anchors {
                bottom: parent.bottom
                right: parent.right
                rightMargin: units.gridUnit * 1.5
                margins: units.gridUnit
            }
            Image {
                source: "images/Melawy_Linux_640x640.svg"
                sourceSize.height: units.gridUnit * 8
                sourceSize.width: units.gridUnit * 8
            }
        }

        Image {
            id: topRect
            anchors.horizontalCenter: parent.horizontalCenter
            y: root.height
            source: "images/rectangle.svg"

            Rectangle {
                radius: 3
                color: "#1d212f"
                height: 6
                width: height*52
                anchors
                {
                    bottom: parent.bottom
                    bottomMargin:0
                    horizontalCenter: parent.horizontalCenter
                }

                Rectangle
                {
                    radius: 3
                    color: "#FFFFFF"
                    width: (parent.width / 6) * (stage - 0.00)
                    anchors
                    {
                        left: parent.left
                        top: parent.top
                        bottom: parent.bottom
                    }
                    Behavior on width {
                        PropertyAnimation {
                            duration: 200
                            easing.type: Easing.InOutQuad
                        }
                    }
                }
            }
        }

        SequentialAnimation {
            id: lineAnimation
            running: false

            ParallelAnimation {
                PropertyAnimation {
                    property: "y"
                    target: topRect
                    to: ((root.height / 3) * 2) - 170
                    duration: 1500
                    easing.type: Easing.InOutBack
                    easing.overshoot: 1.0
                }
            }
        }

        Text {
        visible: true
        height: 1470
        width: 1920
            Text {
                id: text
                font.pointSize: 64
                x: (root.width - width) / 2
                y: (root.height / 3) * 2
                anchors.centerIn: parent
                text: "Welcome!"
                visible: true
                color: "#e92222"
            }
        }

        Text {
            id: loadingText
            height: 40
            anchors.bottomMargin: 0
            anchors.topMargin: 0
            text: "Made with Love"
            color: "#FFFFFF"
            font.family: webFont.name
            font.weight: Font.ExtraLight

            font.pointSize: 32
            opacity: 0
            textFormat: Text.StyledText
            x: (root.width - width) / 2
            y: (root.height / 3) * 2
        }
    }

    OpacityAnimator {
        id: inOpacityAnimationBusyIndicator
        running: false
        target: busyIndicator
        from: 0
        to: 1
        duration: 1000
        easing.type: Easing.InOutQuad
    }

    OpacityAnimator {
        id: outOpacityAnimationBusyIndicator
        running: false
        target: busyIndicator
        from: 1
        to: 0
        duration: 1500
        easing.type: Easing.InOutQuad
    }

    OpacityAnimator {
        id: inOpacityAnimationContent
        running: false
        target: content
        from: 0
        to: 1
        duration: 1000
        easing.type: Easing.InOutQuad
    }

    OpacityAnimator {
        id: outOpacityAnimationContent
        running: false
        target: content
        from: 1
        to: 0
        duration: 3000
        easing.type: Easing.InOutQuad
    }

    OpacityAnimator {
        id: inOpacityAnimationLoadingText
        running: false
        target: loadingText
        from: 0
        to: 1
        duration: 2000
        easing.type: Easing.InOutQuad
        paused: true
    }

    Timer {
        id: timerOpacityAnimationLoadingText
        interval: 1500; running: false; repeat: false;
        onTriggered: root.viewLoadingText();
    }

    function viewLoadingText() {
        inOpacityAnimationLoadingText.from = 0;
        inOpacityAnimationLoadingText.to = 1;
        inOpacityAnimationLoadingText.running = true;
    }
}