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

Variants {
    model: Quickshell.screens
    delegate: PanelWindow {
        id: root
        required property ShellScreen modelData
        screen: modelData
        anchors {
            top: true
            left: true
            right: true
        }

        color: 'transparent'
        implicitHeight: Config.cfg.bar.height
        margins.top: Config.cfg.bar.floating ? 10 : 0
        margins.left: Config.cfg.bar.floating ? 10 : 0
        margins.right: Config.cfg.bar.floating ? 10 : 0
        Rectangle {
            anchors.fill: parent
            color: Colors.barBg
            radius: Config.cfg.bar.floating ?? Config.cfg.appearance.rounding
            RowLayout {
                anchors.leftMargin: 4
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                Ws {
                    barScreen: root.modelData
                }
                ActiveWindow {
                    screen: root.modelData
                }
            }
            RowLayout {
                anchors.centerIn: parent
                Date {}
            }
            RowLayout {
                anchors.rightMargin: 4
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                Mpris {
                    id: mpris
                }
                StyledText {
                    text: "|"
                    visible: mpris.visible
                }
                Bat {
                    id: bat
                }
                StyledText {
                    text: "|"
                    visible: bat.visible
                }
                Tray {
                    id: tray
                }
                StyledText {
                    text: "|"
                    visible: tray.visible
                }
                WallPickerButton {
                    id: wpButton
                    barScreen: root.modelData
                }
                StyledText {
                    text: "|"
                }

                Pw {
                    id: pw
                    barScreen: root.modelData
                }
                StyledText {
                    text: "|"
                }
                Netstatus {
                    id: net
                }
            }
        }
    }
}