/******************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Quick Ultralite module.
**
** $QT_BEGIN_LICENSE:COMM$
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** $QT_END_LICENSE$
**
******************************************************************************/

import QtQuick 2.15
import QtQuickUltralite.Extras 2.0
import Watch 1.0

Item {
    id: root
    height: Theme.appHeight
    width: Theme.appWidth

    property bool onScreen: false
    property bool offScreen: false

    readonly property real startOp: 0.0
    readonly property real startForecastMargin: 40
    readonly property real startDescriptionMargin: 10
    readonly property real startTopMargin: height / 2 - currentWeather.height / 2
    readonly property int introDuration: 150
    readonly property int introDurationLong: 250

    SequentialAnimation {
        id: intro

        ParallelAnimation {
            NumberAnimation { target: currentWeather; property: "margin"; to: 30; easing.type: Easing.InOutCubic; duration: introDurationLong }
            NumberAnimation { target: weatherCity; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDurationLong }
        }
        NumberAnimation { target: bottomMask; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDurationLong }
        ParallelAnimation {
            NumberAnimation { target: weatherForecast; property: "tueOpacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration }
            NumberAnimation { target: weatherForecast; property: "tueMargin"; to: 20; easing.type: Easing.OutCubic; duration: introDuration }
        }
        ParallelAnimation {
            NumberAnimation { target: weatherForecast; property: "wedOpacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration }
            NumberAnimation { target: weatherForecast; property: "wedMargin"; to: 20; easing.type: Easing.OutCubic; duration: introDuration }
        }
        ParallelAnimation {
            NumberAnimation { target: weatherForecast; property: "thuOpacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration }
            NumberAnimation { target: weatherForecast; property: "thuMargin"; to: 20; easing.type: Easing.OutCubic; duration: introDuration }
        }

        NumberAnimation { target: weatherForecast; property: "sepOpacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration }
        ParallelAnimation {
            NumberAnimation { target: weatherDescription; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDurationLong }
            NumberAnimation { target: weatherDescription; property: "bottomMar"; to: 30; easing.type: Easing.OutCubic; duration: introDurationLong }
        }
    }

    /*
    * Current weather
    */
    Column {
        id: currentWeather
        anchors.right: parent.right
        anchors.rightMargin: parent.width / 2 - width
        anchors.top: parent.top
        anchors.topMargin: margin

        property int margin: startTopMargin

        Text {
            text: "18°"
            font.pixelSize: 61
            font.family: Theme.fontFamily
            font.weight: Font.Medium
            color: Theme.whiteColor
        }

        Text {
            id: weatherCity
            opacity: 0.0
            text: "BERLIN"
            font.pixelSize: 20
            font.family: Theme.fontFamily
            color: Theme.whiteColor
        }
    }

    /*
    * Weather big icon
    */
    Image {
        id: weatherIcon
        anchors.verticalCenter: currentWeather.verticalCenter
        anchors.right: currentWeather.left
        anchors.rightMargin: 10
        source: "images/weather/big-sun.png"
    }

    /*
    * Weather description
    */
    Row {
        id: weatherDescription
        anchors.bottom: bottomMask.top
        anchors.bottomMargin: bottomMar
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 15
        opacity: startOp

        property real bottomMar: startDescriptionMargin

        Image {
            source: "images/weather/ion-ios-rainy-outline.png"
        }

        StaticText {
            text: "Rain in 4 hours (17:00)"
            font.pixelSize: 25
            font.family: Theme.fontFamily
            color: Theme.whiteColor
        }
    }

    Image {
        id: bottomMask
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        source: "images/weather/w-bottom-mask.png"
        opacity: startOp
    }

    /*
    * Bottom weather forecast
    */
    Row {
        id: weatherForecast
        anchors.top: bottomMask.top
        anchors.horizontalCenter: parent.horizontalCenter

        property real tueOpacity: startOp
        property real wedOpacity: startOp
        property real thuOpacity: startOp
        property real sepOpacity: startOp

        property real tueMargin: startForecastMargin
        property real wedMargin: startForecastMargin
        property real thuMargin: startForecastMargin

        Repeater {
            model: ListModel {
                ListElement { day: "TUE"; weatherImg: "images/weather/ion-ios-partlysunny-outline.png"; temperature: "21°C" }
                ListElement { day: "WED"; weatherImg: "images/weather/ion-ios-rainy-outline.png"; temperature: "19°C" }
                ListElement { day: "THU"; weatherImg: "images/weather/ion-ios-sunny-outline.png"; temperature: "23°C" }
            }

            delegate: Item {
                width: 90
                opacity: getOpacity(index)

                Text {
                    id: dayLabel
                    anchors.left: temperatureLabel.left
                    anchors.top: parent.top
                    anchors.topMargin: getMargin(index)

                    text: model.day
                    font.pixelSize: 14
                    font.family: Theme.fontFamily
                    color: Theme.whiteColor
                }

                Text {
                    id: temperatureLabel
                    anchors.top: dayLabel.bottom
                    anchors.horizontalCenter: parent.horizontalCenter

                    text: model.temperature
                    font.pixelSize: 30
                    font.family: Theme.fontFamily
                    color: Theme.whiteColor
                }

                Image {
                    anchors.topMargin: 30 - height / 2
                    anchors.top: temperatureLabel.bottom
                    anchors.horizontalCenter: temperatureLabel.horizontalCenter
                    source: model.weatherImg
                }

                Image {
                    anchors.top: parent.top
                    anchors.right: parent.right
                    visible: index < 2
                    source: "images/weather/w-vertical.png"
                    opacity: weatherForecast.sepOpacity
                }
            }
        }
    }

    onOnScreenChanged: {
        if (onScreen) {
            intro.running = true
        }
    }

    onOffScreenChanged: {
        if (offScreen) {
            resetIntro()
        }
    }

    function resetIntro() {
        intro.running = false
        currentWeather.margin = startTopMargin
        weatherCity.opacity = startOp
        bottomMask.opacity = startOp
        weatherForecast.tueOpacity = startOp
        weatherForecast.wedOpacity = startOp
        weatherForecast.thuOpacity = startOp
        weatherForecast.sepOpacity = startOp
        weatherDescription.opacity = startOp
        weatherForecast.tueMargin = startForecastMargin
        weatherForecast.wedMargin = startForecastMargin
        weatherForecast.thuMargin = startForecastMargin
        weatherDescription.bottomMar = startDescriptionMargin
    }

    function getOpacity(index : int) : real {
        switch(index) {
            case 0:
                return weatherForecast.tueOpacity
            case 1:
                return weatherForecast.wedOpacity
            case 2:
                return weatherForecast.thuOpacity
        }
    }

    function getMargin(index : int) : real {
        switch(index) {
            case 0:
                return weatherForecast.tueMargin
            case 1:
                return weatherForecast.wedMargin
            case 2:
                return weatherForecast.thuMargin
        }
    }
}