import QtQuick
import Quickshell
import Quickshell.Hyprland
import Quickshell.Widgets
import Quickshell.Wayland

Grid {
    id: overview
    anchors {
        top: parent.top
        horizontalCenter: parent.horiontalCenter
    }
    spacing: 6
    padding: 6
    columns: 5
    horizontalItemAlignment: Grid.AlignHCenter
    verticalItemAlignment: Grid.AlignVCenter
    component WorkspaceView: ClippingRectangle {
        color: "#282828"
        width: 192
        radius: 8
        topLeftRadius: modelData == 0 ? 12 : this.radius
        topRightRadius: modelData == 4 ? 12 : this.radius
        bottomLeftRadius: modelData == 5 ? 12 : this.radius
        height: this.width * Hyprland.focusedMonitor?.height / Hyprland.focusedMonitor?.width
        border {
            width: 2
            color: {
                if (Hyprland.focusedWorkspace?.id == modelData + 1) {
                    return "#ffffffff"
                }
                if (hover.hovered) {
                    return "#aaffffff"
                }
                return "#00ffffff"
                
            } 
            Behavior on color { ColorAnimation {duration: 150} }
        }
        required property var modelData
        Image {
            anchors.fill: parent
            source: Quickshell.shellPath('assets/wallpaper')
            fillMode: Image.PreserveAspectCrop
        }
        Repeater {
            model: Hyprland.toplevels.values.filter(tl => tl.workspace?.id == modelData + 1)
            delegate: ClippingRectangle {
                x: modelData.lastIpcObject.at[0] / 10 - 2
                y: modelData.lastIpcObject.at[1] / 10 - 2
                width: modelData.lastIpcObject.size[0] / 10
                height: modelData.lastIpcObject.size[1] / 10
                ScreencopyView {
                    anchors.fill: parent
                    captureSource: modelData.wayland
                    live: background.index == 7
                }
            }
        }
        TapHandler { onTapped: {
            Hyprland.dispatch(`hl.dsp.focus({workspace = ${modelData + 1}})`)
            root.close()
        }}
        HoverHandler { id: hover }
    }
    Repeater {
        model: 9
        WorkspaceView {}
    }
    WorkspaceView {
        modelData: -100 
        bottomRightRadius: 12
    }
}