/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Studio.Components
import QtQuickUltralite.Studio.Components
import QtQuick3D.Particles3D
import QtQuick3D.Physics
import QtQuick.Studio.Effects

Item {
    id: root
    width: 150
    height: 150
    state: "Hot"
    property bool overflow: false
    property real value: 0.6
    property alias xEnd: outerArc.end
    property alias xStart: outerArc.begin

    Rectangle {
        id: bg
        width: 110
        height: 110
        color: "#4f4f4f"
        radius: bg.width / 2
        anchors.centerIn: parent
    }

    ArcItem {
        id: outerArc
        anchors.fill: parent
        strokeColor: "#767676"
        strokeWidth: 10
        end: 510
        begin: 210
        fillColor: "#00000000"
    }

    ArcItem {
        id: groove
        width: 130
        height: 130
        layer.enabled: true
        strokeWidth: 10
        strokeColor: "#000000"
        fillColor: "#00000000"
        end: 510
        begin: 210
        anchors.centerIn: parent
    }

    ArcItem {
        id: valueItem
        width: 130
        height: 130
        opacity: 1
        end: 210 + Math.min(root.value, 1) * (300)
        clip: false
        anchors.centerIn: parent
        strokeWidth: 10
        strokeColor: "#33c2ff"
        fillColor: "#00000000"
        begin: 210

        AppIcons {
            id: appIcons
            anchors.centerIn: parent
        }
    }

    Rectangle {
        id: rectangle
        width: 10
        height: 10
        color: valueItem.strokeColor
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.horizontalCenter: parent.horizontalCenter
    }

    states: [
        State {
            name: "Cool"
            when: root.value < 0.3333
        },
        State {
            name: "Warm"
            when: root.value < 0.6666

            PropertyChanges {
                target: valueItem
                strokeColor: "#fffc33"
            }

            PropertyChanges {
                target: rectangle
                width: 30
            }
        },
        State {
            name: "Hot"

            PropertyChanges {
                target: valueItem
                strokeColor: "#ff3333"
            }

            PropertyChanges {
                target: rectangle
                width: 50
            }
        }
    ]
    transitions: [
        Transition {
            id: transition
            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: valueItem
                        property: "strokeColor"
                        duration: 579
                    }
                }
            }

            ParallelAnimation {
                SequentialAnimation {
                    PauseAnimation {
                        duration: 0
                    }

                    PropertyAnimation {
                        target: rectangle
                        property: "width"
                        easing.bezierCurve: [0.808, -0.283, 0.378, 1.38, 1, 1]
                        duration: 902
                    }
                }
            }
            to: "*"
            from: "*"
        }
    ]
}

/*##^##
Designer {
    D{i:0}D{i:4}D{i:6}D{i:14;transitionDuration:2000}
}
##^##*/