import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Material

import Qt.labs.settings

ApplicationWindow {
    id: window
    width: 800
    height: 600

    visible: true
    title: Qt.application.name

    Settings {
        category: "ApplicationWindow"
        property alias x: window.x
        property alias y: window.y
        property alias width: window.width
        property alias height: window.height
    }
    Settings {
        category: "settings"
        property alias nrOfElements: nrOfElements.value
    }
    Settings{
        id: settings
    }

    property int counter: 0
    property bool online: false

    function add(entry){
        var diff = data.count - nrOfElements.value+1
        if( diff > 0 )
            data.remove(0, diff)
        data.append( entry )     
    }

    function update(event){
        console.log(event)
    }

    function fetch(){
        console.log("Try to fetch...")
        var last_response_len = 0;
        var xhr = new XMLHttpRequest();        
        xhr.open('GET', 'http://127.0.0.1/stream', true); // method, adress, async
        xhr.setRequestHeader('Accept', 'text/event-stream');
        xhr.onreadystatechange = console.log( xhr.readyState )
        xhr.onprogress = () => {
            var responseText = xhttxhrp.response.substr(last_response_len);
            last_response_len = xhr.response.length;
            update( responseText )
        }
        xhr.send()
    }

    ListModel{
        id: data
    }

    Timer{
        id: reconnect
        interval: 3000
        repeat: true
        running: false
        onTriggered: fetch()
    }
    Component.onCompleted: {
        fetch()
    }

    header: RowLayout{
        Label{
            Layout.alignment: Qt.AlignLeft
            text: 'Nr of Elements: ' + nrOfElements.value
        }
        Slider{
            Layout.alignment: Qt.AlignLeft
            id: nrOfElements
            from: 5
            to: 25
            stepSize: 1
            onValueChanged: {
                while( data.count > value )
                {
                    data.remove(0, 1);
                }
            }
        }
        Rectangle{
            Layout.alignment: Qt.AlignLeft
            id: status
            property bool online: window.online
            width: 100
            height: 30
            color: online ? 'green' : 'red'
            radius: 5
            Label{
                anchors.centerIn: parent
                text: parent.online ? 'Online' : 'Offline'
            }
        }
        Button{
            text: "Test"
            onClicked: {
                counter++;
                var txt = "Counter " + counter
                window.add( {type: "Message", txt: txt} )
            }
            
        }
        Item{
            Layout.fillWidth: true
        }
    }
    ListView{
        anchors.fill: parent
        model: data
        delegate: Label{
            text: type + ' : ' + txt
        }
    }
}