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

Grid {
    id: overview
    anchors {
        top: parent.top
        horizontalCenter: parent.horiontalCenter
    }
    spacing: 4
    padding: 6
    columns: 5
    horizontalItemAlignment: Grid.AlignHCenter
    verticalItemAlignment: Grid.AlignVCenter
    onVisibleChanged: {
        if (!visible) return;
        Hyprland.refreshToplevels()
    }
    component WorkspaceView: ClippingRectangle {
        id: workspaceView
        color: "#282828"
        width: 192
        radius: 8
        topLeftRadius: modelData == 0 ? 12 : this.radius
        topRightRadius: modelData == 4 ? 12 : this.radius
        bottomLeftRadius: modelData == 5 ? 12 : this.radius
        property var widthRatio: this.width / Hyprland.focusedMonitor?.width
        height: Hyprland.focusedMonitor?.height * widthRatio
        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: Item {
                x: modelData.lastIpcObject.at?.[0] * workspaceView.widthRatio - 2
                y: modelData.lastIpcObject.at?.[1] * workspaceView.widthRatio - 2
                width: modelData.lastIpcObject.size?.[0] * workspaceView.widthRatio
                height: modelData.lastIpcObject.size?.[1] * workspaceView.widthRatio
                ScreencopyView {
                    anchors.fill: parent
                    captureSource: modelData.wayland
                    live: overview.visible
                    layer.enabled: true
                    layer.effect: MultiEffect {
                        blurEnabled: true
                        blurMax: 8
                        blur: 1
                        autoPaddingEnabled: false
                    }
                }
                Image {
                    id: appicon
                    anchors.centerIn: parent
                    width: 36
                    height: width
                    sourceSize.width: width
                    sourceSize.height: height
                    source: {
                        const appId = modelData.wayland?.appId
                        const iconName = DesktopEntries.applications.values.find(
                            app => app.startupClass === appId || app.id === appId
                        )?.icon;
                        return Quickshell.iconPath(iconName)
                    }
                    layer.enabled: true
                    visible: false
                }
                MultiEffect {
                    anchors.fill: appicon
                    source: appicon
                    blurMax: 12
                    shadowEnabled: true
                }
                MultiEffect {
                    anchors.fill: appicon
                    source: appicon
                    blurMax: 12
                    shadowEnabled: true
                }
            }
        }
        TapHandler { onTapped: {
            if (modelData < 0) return;
            Hyprland.dispatch(`hl.dsp.focus({workspace = ${modelData + 1}})`)
            root.close()
        }}
        HoverHandler { id: hover }
    }
    Repeater {
        model: 9
        WorkspaceView {}
    }
    WorkspaceView {
        modelData: -100 
        bottomRightRadius: 12
        TapHandler {
            onTapped: {
                Hyprland.dispatch('hl.dsp.workspace.toggle_special()')
                root.close()
            }
        }
    }
}