import QtQuick 6.8
import QtQuick.Controls 6.8
import QtQuick.Layouts 6.8

import QYRComponents 1.0

Item {
    anchors.fill: parent

    property bool loading: true
    property bool failed: false

    GridView {
        width: Math.floor(cellWidth / parent.width) * cellWidth
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        // anchors.topMargin: Player.active ? 96 : 0
        visible: !loading || !failed
        anchors.fill: parent
        model: ListModel { id: model }
        clip: true

        cellWidth: 384
        cellHeight: 224

        delegate: VideoEntry {}

        Component.onCompleted:         console.log(cellWidth / parent.width)
    }

    BusyIndicator {
        anchors.centerIn: parent
        visible: loading
        running: loading
    }

    ColumnLayout {
        Layout.alignment: Qt.AlignVCenter
        anchors.centerIn: parent
        visible: failed

        Label {
            text: "Couldn't get videos!"
            heading: "h2"
            font.bold: true
        }

        Label {
            text: "This could mean that either your internet or YouVideo is down."
            heading: "h4"
        }

        Label {
            Layout.bottomMargin: 25
            text: "Check your network connection and try again!"
            heading: "h4"
        }

        Button {
            text: "Retry"
            onClicked: parent.fetchData()
        }
    }

    Timer {
        interval: 1000
        running: true
        onTriggered: parent.fetchData()
    }

    function fetchData() {
        model.clear();
        loading = true;
        failed = false;
        const xhr = new XMLHttpRequest;
        xhr.open("GET", "https://youvideo.nonamesoft.xyz/youvideo/api/videos");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == XMLHttpRequest.DONE) {
                loading = false;
                if (xhr.status != 200) {
                    console.log("Invalid response");
                    failed = true;
                    return;
                }
                const data = JSON.parse(xhr.responseText);
                console.log("Received data, found " + data.length + " videos");
                data.forEach(video => {
                    model.append(video);
                });
            }
        }
        xhr.ontimeout = function() {
            loading = false;
            failed = true;
            console.log("Request timed out");
        }
        xhr.send();
    }
}