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

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: root
    color: "#ccc";

    // Create an instance of the custom AlarmModel
    AlarmModel {
        id: alarmModel
    }

    // Call AlarmModel::tick() every second.
    Timer {
        running: true
        repeat: true
        interval: 1000
        onTriggered: alarmModel.tick()
    }

    // Declare the delegate that the ListView (below) instantiates for each
    // entry in the alarm model.
    //
    // It shows information about the entry and two buttons, one to pause or
    // unpause the alarm, and one to remove it from the list.
    Component {
        id: alarmDelegate

        Item {
            width: root.width
            height: 60
            Text {
                x: 10
                anchors.verticalCenter: parent.verticalCenter
                text: {
                    // This function computes what text to show for the entry.
                    // It uses model.seconds to access the "seconds" field
                    // of the AlarmData associated with this delegate instance.
                    if (model.seconds >= 0)
                        return "in " + model.seconds + " seconds"
                    return (-model.seconds) + " seconds ago"
                }
                color: {
                    if (model.seconds >= 0) {
                        if (model.running)
                            return "green"
                        return "red"
                    }
                    return "gray"
                }
            }
            Row {
                anchors.right: parent.right
                Button {
                    text: model.running ? "Pause" : "Unpause"
                    visible: model.seconds > 0
                    // The "index" property contains the model index for
                    // the current delegate instance.
                    onClicked: alarmModel.togglePause(index)
                }
                Button {
                    text: "Remove"
                    onClicked: alarmModel.remove(index)
                }
            }
        }
    }

    // This ListView is the main display element. It creates an alarmDelegate
    // instance for each entry in alarmModel and listens to alarmModel changes.
    ListView {
        width: parent.width
        anchors.top: parent.top
        anchors.bottom: controls.top

        model: alarmModel
        delegate: alarmDelegate
    }

    Rectangle {
        id: controls
        color: "#aae"
        height: createNewButton.height
        width: parent.width
        anchors.bottom: parent.bottom
        Button {
            id: createNewButton
            text: "Create new"
            anchors.right: parent.right
            onClicked: alarmModel.addEntry(15)
        }
    }
}