import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

import org.kde.plasma.plasmoid 2.0
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.components 3.0 as PlasmaComponents3
import org.kde.plasma.extras 2.0 as PlasmaExtras

Item {
    width: PlasmaCore.Units.gridUnit * 20
    height: PlasmaCore.Units.gridUnit * 40

    readonly property string canvasUrl: plasmoid.configuration.canvasUrl
    readonly property string apiEndpoint: `${canvasUrl.replace(/\/$/, "")}/api/v1`
    readonly property string oauth2Token: plasmoid.configuration.oauth2Token
    readonly property string authHeader: `Bearer ${oauth2Token}`

    function syncCanvas() {
        let xhr = new XMLHttpRequest()
        xhr.open("GET", `${apiEndpoint}/courses`)
        xhr.setRequestHeader("Authorization", authHeader)
        xhr.onload = function () {
            if (xhr.status == 200) {
                try {
                    let courses = JSON.parse(xhr.responseText)
                    for (let c of courses) {
                        announcementsModel.append({course: c.name, title: ""})
                    }
                } catch (e) {
                    if (e instanceof SyntaxError) { console.error("Cannot parse JSON:") }
                    else { throw e }
                }
            } else {
                console.error("XHR failed")
            }
        }
        xhr.send()
    }

    Timer {
        interval: 60 * 1000
        running: true;
        repeat: true;
        onTriggered: syncCanvas();
    }

    Plasmoid.preferredRepresentation: Plasmoid.fullRepresentation

    Plasmoid.fullRepresentation: main

    ColumnLayout {
        id: main
        anchors.fill: parent
        width: PlasmaCore.Units.gridUnit * 20
        height: PlasmaCore.Units.gridUnit * 40

        PlasmaExtras.Heading {
            level: 1
            text: "Kanvas"
        }

        PlasmaExtras.Heading {
            level: 2
            text: "Announcements"
        }

        ListModel {
            id: announcementsModel
        }

        ScrollView {
            implicitHeight: PlasmaCore.Units.gridUnit * 20
            Layout.margins: PlasmaCore.Units.smallSpacing
            Layout.fillWidth: true
            Layout.fillHeight: true
            ListView {
                Layout.fillWidth: true
                delegate: Text {
                    text: `[${course}] ${title}`
                    color: PlasmaCore.Theme.textColor
                }
                model: announcementsModel
            }
        }

        PlasmaComponents3.Button {
            icon.name: "view-refresh"
            text: i18n("Refresh")
            onClicked: syncCanvas()
        }
    }
}