/******************************************************************************
**
** 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
    property bool isOver13kRpm: false
    property int rpm: 0
    property int gear: 0
    width: 152
    height: 152

    property bool active
    property color ringsColor: Style.neutralGreen
    property color backgroundColor: Style.neutralGreen

    states:
    [
        State {
            name: "neautralGear"
            when: gear === 0
            PropertyChanges { target: root; ringsColor: Style.neutralGreen }
            PropertyChanges { target: root; backgroundColor: Style.neutralGreen }
            PropertyChanges { target: textValue; text: "N" }
        },
        State {
            name: "driveGear"
            when: gear !== 0
            PropertyChanges { target: root; ringsColor: root.isOver13kRpm ? Style.red : Style.neutralGreen }
            PropertyChanges { target: root; backgroundColor: root.isOver13kRpm ? Style.red : Style.normalGreen }
            PropertyChanges { target: textValue; text: root.gear }
        }
    ]

    Behavior on ringsColor { ColorAnimation {
        duration: 400
        easing.type: Easing.InOutQuad
    }}

    Behavior on backgroundColor { ColorAnimation {
        duration: 400
        easing.type: Easing.InOutQuad
    }}

    Rectangle
    {
        id: background
        width: holeInBackground.width
        height: holeInBackground.height

        color: root.backgroundColor
        anchors.centerIn: root
    }

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

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

    Text {
        id: textValue
        font.family: "Barlow-mono"
        font.pixelSize: 110
        color: "white"
        anchors.centerIn: background
        anchors.horizontalCenterOffset: -22
        transform: [
            Rotation {
                origin.x: textValue.width / 2
                origin.y: textValue.height / 2
                angle: -90
            }
        ]
    }

    Text {
        id: gearText
        height: gearText.width
        font.family: "Barlow-mono"
        font.pixelSize: 32
        color: "white"
        text: "Gear"
        anchors.centerIn: background
        anchors.horizontalCenterOffset: 60
        transform: [
            Rotation {
                origin.x: gearText.width / 2
                origin.y: gearText.height / 2
                angle: -90
            }
        ]
    }

    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
        holeInBackground.opacity = 0
        background.opacity = 0
        gradientCircle.opacity = 0

        textValue.opacity = 0
        gearText.opacity = 0
    }

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

    function startAnimation()
    {
        startUpAnimation.start()
    }

    function hiddingAnimation()
    {
        hideAnimation.start()
    }

    SequentialAnimation {
        id: hideAnimation
        NumberAnimation { target: background; property: "opacity"; to: 0; duration: 500; easing.type: Easing.OutCubic }
        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 }
        }
        ScriptAction { script: { holeInBackground.opacity = 1 } }

        SequentialAnimation {
            NumberAnimation { target: ring1; property: "opacity"; from: 0; to: 1;
                duration: StartupConfig.ring1OpacityDuration; easing.type: Easing.OutCubic }
            NumberAnimation { target: gradientCircle; property: "opacity"; from: 0; to: 1;
                duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutCubic }
            ParallelAnimation {
                NumberAnimation { target: background; property: "opacity"; from: 0; to: 1;
                    duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutCubic }
                NumberAnimation { target: gearText; property: "opacity"; from: 0; to: 1;
                    duration: StartupConfig.backgroundOpacityDuration; easing.type: Easing.OutCubic }
            }
            NumberAnimation { target: textValue; property: "opacity"; from: 0; to: 1;
                duration: 500; easing.type: Easing.OutCubic }
        }
    }

    Component.onCompleted: {
        hideElements()
    }
}