/******************************************************************************
**
** Copyright (C) 2023 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 thes
** 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
import QtQuick.Shapes
import QtQuickUltralite.Studio.Components
import Theme

Item {
    id: root

    readonly property int angleOffset: 45
    property int beginAngle: 180 + root.angleOffset
    property int endAngle: 180 + 360 - root.angleOffset
    property alias arcWidth: arc.arcWidth
    property alias fillColor: arc.fillColor
    property alias fillDarkColor: gradientStop2.color
    property alias outlineArc: arc.outlineArc
    property alias round: arc.round
    property int value: 0
    property int valueAngle: root.beginAngle + (root.endAngle - root.beginAngle) * root.value / 100 + 1

    height: 160
    width: 160

    Timer {
        id: lazyTimer
        interval: 250
        repeat: true
        running: true

        onTriggered: {
            digit.text = root.value;
        }
    }
    ArcItem {
        id: bg
        anchors.centerIn: parent
        arcWidth: arc.arcWidth
        begin: root.beginAngle
        end: root.endAngle
        fillColor: "#707070"
        height: arc.width
        outlineArc: arc.outlineArc
        round: arc.round
        strokeWidth: 0
        strokeColor: Theme.backgroundArcStrokeColor
        width: root.width
    }

    ArcItem {
        id: arc
        anchors.centerIn: parent
        arcWidth: 28
        begin: root.beginAngle
        end: root.valueAngle
        fillColor: "#00414a"
        height: arc.width
        outlineArc: true
        round: true
        strokeColor: Theme.foregroundArcStrokeColor
        strokeWidth: 2
        width: root.width

        gradient: LinearGradient {
            x1: 0
            y1: 20
            x2: 160
            y2: 140

            GradientStop {
                id: gradientStop1
                color: arc.fillColor
                position: 0.5
            }

            GradientStop {
                id: gradientStop2
                color: "#400006"
                position: 1
            }
        }
    }

    Text {
        id: digit
        anchors.centerIn: parent
        color: "gray"
        font.bold: true
        font.italic: true
        font.pixelSize: 32
    }
}