// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial
import QtQuick
import QtQuick.Controls

Item {
    id: root
    ListModel {
        id: colorModel
        ListElement {
            color: "#FF0018"
            darkColor: "#4d0007"
        }
        ListElement {
            color: "#FFA52C"
            darkColor: "#5a3300"
        }
        ListElement {
            color: "#008018"
            darkColor: "#002607"
        }
        ListElement {
            color: "#86007D"
            darkColor: "#280025"
        }
    }
    Row {
        anchors.centerIn: parent
        spacing: 16

        Item {
            height: props.height
            width: gauge.width

            Gauge {
                id: gauge
                anchors.centerIn: parent
                fillColor: "#FF0018"
            }
        }
        Column {
            id: props
            Switch {
                id: switchOutlineArc
                checked: gauge.outlineArc
                text: "outlineArc"

                onToggled: {
                    gauge.outlineArc = switchOutlineArc.checked;
                    idleTimer.restart();
                }
            }
            Switch {
                id: switchRound
                checked: gauge.round
                text: "round"

                onToggled: {
                    gauge.round = switchRound.checked;
                    idleTimer.restart();
                }
            }
            Column {
                padding: 4
                spacing: 4

                Text {
                    color: DefaultStyle.textColor
                    text: "arcWidth"
                }
                Slider {
                    id: sliderArcWidth
                    from: 4
                    to: 48
                    value: gauge.arcWidth
                    width: 224

                    onMoved: {
                        gauge.arcWidth = sliderArcWidth.value;
                        idleTimer.restart();
                    }
                }
            }
            Row {
                id: colorPicker
                padding: 4
                spacing: 8

                Repeater {
                    model: colorModel

                    Rectangle {
                        color: gauge.fillColor === model.color ? "gray" : model.color
                        height: 42
                        width: 50

                        Rectangle {
                            anchors.centerIn: parent
                            color: model.color
                            height: parent.height - 6
                            width: parent.width - 6

                            MouseArea {
                                anchors.fill: parent

                                onClicked: {
                                    gauge.fillColor = model.color;
                                    gauge.fillDarkColor = model.darkColor;
                                    idleTimer.restart();
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    ArcItemIdleTimer {
        id: idleTimer
        hasOutlineArc: gauge.outlineArc

        onChangeArcWidth: {
            gauge.arcWidth = arcWidth;

            // The slider value was not updated from the above assignment,
            // so it would be updated manually.
            sliderArcWidth.value = arcWidth;
        }
        onChangeFillColor: {
            gauge.fillColor = colorModel.get(colorNumber).color;
        }
        onSwitchOutlineArc: {
            gauge.outlineArc = !gauge.outlineArc;
        }
        onSwitchRound: {
            gauge.round = !gauge.round;
        }
    }
    SequentialAnimation {
        loops: Animation.Infinite
        running: true

        NumberAnimation {
            duration: 3200
            from: 0
            property: "value"
            target: gauge
            to: 100
        }
        NumberAnimation {
            duration: 3200
            from: 100
            property: "value"
            target: gauge
            to: 0
        }
    }
}