import Quickshell
import Quickshell.WindowManager
import QtQuick
import QtQuick.Layouts
import qs
import qs.widgets
import qs.settings

BarComponent {
    id: root
    required property ShellScreen barScreen
    implicitWidth: wsLayout.implicitWidth + 16
    readonly property var sortedWindowsets: {
        const projection = WindowManager.screenProjection(root.barScreen)
        const sets = projection ? (projection.windowsets ?? []) : []

        const numericName = ws => {
            const name = ws ? String(ws.name ?? "") : ""
            return name !== "" && Number.isFinite(Number(name)) ? Number(name) : NaN
        }

        return Array.from(sets).sort((a, b) => {
            const na = numericName(a)
            const nb = numericName(b)
            if (!isNaN(na) && !isNaN(nb))
                return na - nb

            const byName = String(a?.name ?? "").localeCompare(String(b?.name ?? ""), undefined, { numeric: true })
            return byName !== 0 ? byName : (a?.id ?? 0) - (b?.id ?? 0)
        })
    }

    RowLayout {
        id: wsLayout
	anchors.verticalCenter: parent.verticalCenter
	anchors.horizontalCenter: parent.horizontalCenter
        spacing: 4
        Repeater {
            model: root.sortedWindowsets
            delegate: Rectangle {
                id: wsContainer
                required property var modelData
		radius: Config.cfg.appearance.rounding
                implicitWidth: 16
		implicitHeight: implicitWidth
                color: modelData.active ? Colors.accent : 'transparent'
                MouseArea {
                    id: clickHandler
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    acceptedButtons: Qt.LeftButton
                    onClicked: wsContainer.modelData.activate()
                }
                StyledText {
                    id: wsText
                    anchors.centerIn: parent
                    text: parent.modelData.name
                    color: parent.modelData.shouldDisplay ? parent.modelData.active ? Colors.c.base00 : Colors.font : Colors.font
		    opacity: parent.modelData.shouldDisplay ? 1.0 : 0.2
                }
            }
        }
    }
}