/*
 *   Copyright 2023 Valeria Fadeeva <valeria@fadeeva.me>
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU Affero General Public License version 3,
 *   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 Affero General Public License for more details
 *
 *   You should have received a copy of the GNU Affero 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.11
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.4
import Qt5Compat.GraphicalEffects

Pane {
    id: root

    height: Screen.height
    width: Screen.ScreenWidth

    LayoutMirroring.enabled: false
    LayoutMirroring.childrenInherit: true

    padding: 0
    palette.button: "transparent"
    palette.highlight: "#E03D3D"
    palette.text: "#A03d40"
    palette.buttonText: "#A03d40"
    palette.window: "#1C1B20"

    font.family: "Noto Sans"
    font.pointSize: parseInt(height / 80)
    focus: true

    TextMetrics {
        id: units
        text: "M"
        property int gridUnit: boundingRect.height
        property int largeSpacing: units.gridUnit
        property int smallSpacing: Math.max(2, gridUnit/4)
    }

    property int stage

    onStageChanged: {
        if (stage == 1) {
            inOpacityAnimationContent.running = true;
            lineAnimation.running = true;
        }
        else if (stage == 4) {
            outOpacityAnimationForm.running = true;
            outOpacityAnimationContent.running = true;
        }
    }

    Item {
        id: sizeHelper

        anchors.fill: parent
        height: parent.height
        width: parent.width

        Rectangle {
            id: tintLayer

            anchors.fill: parent
            width: parent.width
            height: parent.height
            color: "#000000"
            opacity: 0.0
            z: 1
        }

        Rectangle {
            id: form

            height: parent.height
            width: parent.width / 3
            anchors.horizontalCenter: undefined
            anchors.left: parent.left
            anchors.right: undefined
            opacity: 0.0
            z: 1
        }

        Image {
            id: backgroundImage

            height: parent.height
            width: parent.width
            anchors.left: parent.left
            anchors.right: parent.right

            horizontalAlignment: Image.AlignHCenter
            verticalAlignment: Image.AlignVCenter

            source: "images/background.png"
            fillMode: Image.PreserveAspectCrop
            //fillMode: Image.PreserveAspectFit
            asynchronous: true
            cache: true
            clip: true
            mipmap: true
        }

        ShaderEffectSource {
            id: blurMask

            sourceItem: backgroundImage
            width: form.width
            height: parent.height
            anchors.centerIn: form
            sourceRect: Qt.rect(x,y,width,height)
            visible: true
        }

        GaussianBlur {
            id: blur

            height: parent.height
            width: form.width
            source: blurMask
            radius: 100
            samples: 201
            cached: true
            anchors.centerIn: form
            visible: true
        }
    }

    Item {
        id: content
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0
        anchors.fill: form
        opacity: 0

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

        Image {
            id: logo
            property real size: units.gridUnit * 15
            anchors.centerIn: form
            source: "images/logo.svg"
            sourceSize.width: size
            sourceSize.height: size
            x: (form.width - width) / 2
            y: (form.height / 3) * 2.2
        }

        Image {
            id: topRect
            anchors.left: form.left
            y: form.height
            source: "images/rectangle.svg"

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

                Rectangle
                {
                    radius: 3
                    color: "#FFFFFF"
                    width: (form.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: (form.height / 3) * 2
                    duration: 1500
                    easing.type: Easing.InOutBack
                    easing.overshoot: 1.0
                }
            }
        }

        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: 5000
            easing.type: Easing.InOutQuad
        }

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

        OpacityAnimator {
            id: outOpacityAnimationForm
            running: false
            target: blur
            from: 1
            to: 0
            duration: 5000
            easing.type: Easing.InOutQuad
        }

    }
}