pragma ComponentBehavior: Bound

import QtQuick
import Quickshell
import Quickshell.Io
import QtQuick.Layouts

import "../../../services/niri"
import "../../../config"

Rectangle {
    id: root

    required property ShellScreen screen
    property var workspaces: Niri.workspaces
    property var activeWorkspace: Niri.activeWorkspace
    property var activeWorkspaceIndex: Niri.activeWorkspaceIndex

    property int wsItemHeight: 15

    property bool _: log()
    function log() {
        console.debug("Screen name: " + screen.name);
        console.debug("Found the following workspaces:");
        for (let i = 0; i < workspaces.length; i++) {
            console.debug("Workspace " + workspaces[i].id + " On screen " + workspaces[i].output + " With name: " + workspaces[i].name);
            // console.debug(workspaces[i].output);
        }
        return true;
    }

    // Works
    height: 300

    // Gives warning
    // height: workspaces.length * root.wsItemHeight
    implicitWidth: list.implicitWidth
    color: "transparent"
    border.color: Config.catppuccin.rosewater
    border.width: 0
    radius: 7

    Layout.fillWidth: true

    ListView {
        id: list
        model: root.workspaces
        implicitHeight: contentHeight
        implicitWidth: contentItem.childrenRect.width
        anchors.horizontalCenter: parent.horizontalCenter

        // anchors.fill: parent

        delegate: Item {
            id: wsItem
            // Name of the workspace
            property string name: "VOID"
            // ID of the workspace
            required property string id

            required property string output

            property bool isActive: (id - 1 == root.activeWorkspaceIndex)

            property real animActive: isActive ? 1 : 0.65
            Behavior on animActive {
                NumberAnimation {
                    duration: 150
                }
            }

            // property bool isCorrectScreen: log()
            // function log() {
            //     console.log("Screen name: " + root.screen.name);
            //     console.log(wsItem.output);
            //     console.log(wsItem.id);

            //     let isCorrect = root.screen.name == wsItem.output;
            //     console.log("isCorrect: ", isCorrect);
            //     return root.screen.name == wsItem.output;
            // }

            implicitHeight: root.wsItemHeight
            implicitWidth: 50

            anchors {
                right: parent.right
                left: parent.left
            }

            Rectangle {
                anchors.centerIn: parent
                height: wsItem.height - 5
                width: parent.width * wsItem.animActive
                radius: height / 2
                border.color: Config.catppuccin.mantle
                border.width: 0
                color: Config.catppuccin.blue
                // visible: wsItem.isCorrectScreen
            }
        }
    }
}