import QtQuick
import QtQuick.Shapes
import Quickshell.Widgets
import Quickshell.Hyprland
import Quickshell

Item {
    width: children[0].width
    Row {
        id: workspaceRow
        height: parent.height
        anchors.centerIn: parent
        spacing: 4
        Repeater {
            model: 9
            delegate: Item {
                height: parent.height
                width: 24
                property var workspace: Hyprland.workspaces.values.find(ws => ws.id === modelData+1)
                property var icon: {
                    const appId = workspace?.toplevels.values[0]?.wayland?.appId
                    return DesktopEntries.applications.values.find(
                        app => app.startupClass === appId || app.id === appId
                    )?.icon;
                }
                Rectangle {
                    color: "transparent"
                    width: workspace?.toplevels.values.length ? (icon ? 0 : 16) : 4
                    height: width
                    anchors.centerIn: parent
                    radius: width/2
                    border.color: "white"
                    border.width: workspace?.toplevels.values.length ? (icon ? width/2 : width/4) : width/2
                    Behavior on width {NumberAnimation {duration: 300; easing.type: Easing.OutQuint}}
                }
                Image {
                    width: workspace?.toplevels.values.length && icon ? 24 : 0
                    Behavior on width {NumberAnimation {duration: 300; easing.type: Easing.InOutQuint}}
                    height: width
                    anchors.centerIn: parent
                    anchors.verticalCenterOffset: 0
                    source: icon ? Quickshell.iconPath(icon) : source
                    sourceSize.width: width
                    sourceSize.height: height
                }
            }
        }
    }
    Rectangle {
        x: (Hyprland.focusedWorkspace.id-1) * (workspaceRow.children[0].width + workspaceRow.spacing) + 2
        y: 2
        Behavior on x {NumberAnimation {
            duration: 300
            easing.type: Easing.OutCubic
        }}
        width: 20
        height: 4
        radius: height/2
    }
}