/******************************************************************************
**
** 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

Item {
    id: root
    width: 243
    height: 243

    property bool active
    property real fuelLevel: 30
    property real fuelLevelForStartupAnimation: 0
    property real fuelLevelVisible: (startUpAnimation.running || hideAnimation.running)
                                        ? fuelLevelForStartupAnimation : fuelLevel

    property color colorMode: fuelLevel < 20 ? Style.red :
                          (fuelLevel < 40 ? Style.orange : Style.neutralGreen)

    Behavior on fuelLevelForStartupAnimation
    {
        NumberAnimation{
            duration: 800
            easing.type: Easing.OutCubic
        }
    }

    Image
    {
        id: background
        source: "images/fuelGauge/fuel-colored-bg.png"
        anchors.centerIn: root
    }

    Item
    {
        id: hole
        width: 176
        height: 176
        anchors.centerIn: root
        clip: true

        property int wavesOffset: 0
        property int wavesOffsetVisible: 0

        readonly property int waveHorizontalOffset: -1
        ColorizedImage
        {
            id: wave
            source: "images/fuelGauge/wave-top-part.png"
            color: root.colorMode
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: hole.wavesOffsetVisible
            anchors.right: fuelLevelImage.left
            anchors.rightMargin: hole.waveHorizontalOffset
        }
        ColorizedImage
        {
            id: wave_2
            source: "images/fuelGauge/wave-top-part.png"
            color: root.colorMode
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: -60 - hole.wavesOffsetVisible
            anchors.right: fuelLevelImage.left
            anchors.rightMargin: hole.waveHorizontalOffset
        }
        Image
        {
            id: wave_2_shadow
            source: "images/fuelGauge/wave-shadow.png"
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: -60 - hole.wavesOffsetVisible
            anchors.right: fuelLevelImage.left
            anchors.rightMargin: hole.waveHorizontalOffset
        }

        ColorizedImage
        {
            id: fuelLevelImage
            source: "images/fuelGauge/wave-bottom-part.png"
            color: root.colorMode
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: MathAPI.clamp(root.fuelLevelVisible/80*130 - 130, -130, 0)
        }

        ColorizedImage
        {
            id: holeInBackground
            color: root.colorMode
            anchors.centerIn: parent
            source: "images/fuelGauge/hole-in-bg.png"
        }

        Timer {
            id: updateTimer
            interval: 100
            running: true
            repeat: true
            onTriggered: {
                hole.wavesOffsetVisible = hole.wavesOffset
            }
        }

        readonly property real valIn: 80
        readonly property real valOut: 20
        SequentialAnimation
        {
            id: wavesAnimation
            running: true
            loops: Animation.Infinite
            NumberAnimation {
                target: hole
                property: "wavesOffset"
                duration: 3000
                from: -hole.valIn
                to: hole.valOut
            }
            NumberAnimation {
                target: hole
                property: "wavesOffset"
                duration: 3000
                from: hole.valOut
                to: -hole.valIn
            }
        }
    }

    ColorizedImage
    {
        id: gradientCircle
        color: root.colorMode
        anchors.centerIn: root
        source: "images/fuelGauge/fuel-colored-circle.png"
    }

    Image
    {
        id: fuelScale
        source: "images/fuelGauge/fuel-scale_2.png"
        anchors.centerIn: root
        anchors.verticalCenterOffset: -40
    }

    Image
    {
        id: ring1
        source: "images/fuelGauge/ring-1.png"
        anchors.centerIn: root
    }

    Image
    {
        id: ring2
        source: "images/fuelGauge/ring-2.png"
        anchors.centerIn: root
        property int verticalCenterOffsetValue
        anchors.verticalCenterOffset: verticalCenterOffsetValue
    }

    function hideElements()
    {
        ring1.opacity = 0
        ring2.opacity = 0
        hole.opacity = 0
        fuelLevelForStartupAnimation = 0
        fuelScale.opacity = 0
        background.opacity = 0
        gradientCircle.opacity = 0
    }

    onActiveChanged:
    {
        if(active)
        {
            startAnimation()
        }
        else
        {
            hiddingAnimation()
        }
    }

    function startAnimation()
    {
        startUpAnimation.start()
    }

    function hiddingAnimation()
    {
        hideAnimation.start()
    }

    SequentialAnimation {
        id: hideAnimation
        ScriptAction { script: { root.fuelLevelForStartupAnimation = 0 } }
        PauseAnimation { duration: 500 }
        NumberAnimation { target: background; property: "opacity"; to: 0; duration: 250; easing.type: Easing.OutCubic }
        ScriptAction { script: { hole.opacity = 0 } }
        NumberAnimation { target: root; property: "opacity"; to: 0; duration: 500; easing.type: Easing.OutCubic }
        ScriptAction { script: hideElements() }
    }

    SequentialAnimation {
        id: startUpAnimation

        ScriptAction { script: { root.opacity = 1 } }

        ParallelAnimation{
            NumberAnimation { target: ring2; property: "verticalCenterOffsetValue"; from: -StartupConfig.ring2TravelDistance; to: 0;
                duration: StartupConfig.ring2TravelDuration; easing.type: Easing.OutCubic }
            NumberAnimation { target: ring2; property: "opacity"; from: 0; to: 1;
                duration: StartupConfig.ring2OpacityDuration; easing.type: Easing.OutCubic }
        }
        ParallelAnimation {
            ScriptAction { script: { hole.opacity = 1 } }
            SequentialAnimation {
                PauseAnimation { duration: 300 }
                ScriptAction { script: { root.fuelLevelForStartupAnimation = 45 } }
                PauseAnimation { duration: 600 }
                ScriptAction { script: { root.fuelLevelForStartupAnimation = 30 } }
                PauseAnimation { duration: 600 }
                ScriptAction { script: { root.fuelLevelForStartupAnimation = root.fuelLevel } }
                PauseAnimation { duration: 600 }
            }
            SequentialAnimation {
                NumberAnimation { target: ring1; property: "opacity"; from: 0; to: 1;
                    duration: 300; easing.type: Easing.OutQuad }
                NumberAnimation { target: gradientCircle; property: "opacity"; from: 0; to: 1;
                    duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutQuad }
                ParallelAnimation{
                    NumberAnimation { target: fuelScale; property: "opacity"; from: 0; to: 1;
                        duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutQuad }
                    NumberAnimation { target: background; property: "opacity"; from: 0; to: 1;
                        duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutQuad }
                }
            }
        }
    }

    Component.onCompleted: {
        hideElements()
    }
}