import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import Quickshell
import Quickshell.Io
import qs.Settings

PanelWindow {
    id: wallpaperPanelModal
    implicitWidth: 480
    implicitHeight: 720
    visible: false
    color: "transparent"
    anchors.top: true
    anchors.right: true
    margins.right: 0
    margins.top: -24

    property var wallpapers: []

    Process {
        id: listWallpapersProcess
        running: visible
        command: ["ls", Settings.wallpaperFolder !== undefined ? Settings.wallpaperFolder : ""]
        stdout: StdioCollector {
            onStreamFinished: {
                wallpaperPanelModal.wallpapers = this.text.split("\n").filter(function(x){return x.length > 0})
            }
        }
    }

    Rectangle {
        anchors.fill: parent
        color: Theme.backgroundPrimary
        radius: 24
        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 32
            spacing: 0
            RowLayout {
                Layout.fillWidth: true
                spacing: 20
                Layout.preferredHeight: 48
                Text {
                    text: "image"
                    font.family: "Material Symbols Outlined"
                    font.pixelSize: Theme.fontSizeHeader
                    color: Theme.accentPrimary
                }
                Text {
                    text: "Wallpapers"
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeHeader
                    font.bold: true
                    color: Theme.textPrimary
                    Layout.fillWidth: true
                }
                Rectangle {
                    width: 36; height: 36; radius: 18
                    color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
                    border.color: Theme.accentPrimary
                    border.width: 1
                    Text {
                        anchors.centerIn: parent
                        text: "close"
                        font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
                        font.pixelSize: Theme.fontSizeBody
                        color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
                    }
                    MouseArea {
                        id: closeButtonArea
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: wallpaperPanelModal.visible = false
                        cursorShape: Qt.PointingHandCursor
                    }
                }
            }
            Rectangle {
                Layout.fillWidth: true
                height: 1
                color: Theme.outline
                opacity: 0.12
            }
            // Wallpaper grid area
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
                anchors.topMargin: 16
                anchors.bottomMargin: 16
                anchors.leftMargin: 0
                anchors.rightMargin: 0
                anchors.margins: 0
                clip: true
                ScrollView {
                    id: scrollView
                    anchors.fill: parent
                    clip: true
                    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                    ScrollBar.vertical.policy: ScrollBar.AsNeeded
                    GridView {
                        id: wallpaperGrid
                        anchors.fill: parent
                        cellWidth: Math.max(120, (scrollView.width / 3) - 12)
                        cellHeight: cellWidth * 0.6
                        model: wallpapers
                        cacheBuffer: 0
                        leftMargin: 8
                        rightMargin: 8
                        topMargin: 8
                        bottomMargin: 8
                        delegate: Item {
                            width: wallpaperGrid.cellWidth - 8
                            height: wallpaperGrid.cellHeight - 8
                            Rectangle {
                                id: wallpaperItem
                                anchors.fill: parent
                                anchors.margins: 4
                                color: Qt.darker(Theme.backgroundPrimary, 1.1)
                                radius: 12
                                border.color: Settings.currentWallpaper === (Settings.wallpaperFolder !== undefined ? Settings.wallpaperFolder : "") + "/" + modelData ? Theme.accentPrimary : Theme.outline
                                border.width: Settings.currentWallpaper === (Settings.wallpaperFolder !== undefined ? Settings.wallpaperFolder : "") + "/" + modelData ? 3 : 1
                                Image {
                                    id: wallpaperImage
                                    anchors.fill: parent
                                    anchors.margins: 4
                                    source: (Settings.wallpaperFolder !== undefined ? Settings.wallpaperFolder : "") + "/" + modelData
                                    fillMode: Image.PreserveAspectCrop
                                    asynchronous: true
                                    cache: false
                                    sourceSize.width: Math.min(width, 150)
                                    sourceSize.height: Math.min(height, 90)
                                }
                                MouseArea {
                                    anchors.fill: parent
                                    hoverEnabled: true
                                    onClicked: {
                                        var selectedPath = (Settings.wallpaperFolder !== undefined ? Settings.wallpaperFolder : "") + "/" + modelData;
                                        Settings.currentWallpaper = selectedPath;
                                        Settings.saveSettings();
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}