import Quickshell
import Quickshell.Hyprland
import QtQuick
import QtQuick.Layouts
import qs.Services

Variants {
	model: Quickshell.screens;

	delegate: Component {
		PanelWindow {
			id: root

			required property var modelData
			screen: modelData

			property string fontFamily: "FiraCode Nerd Font"
			property int fontSize: 14

			anchors {
				top: true
				left: true
				right: true
			}

			implicitHeight: 36 + 8

			color: "transparent"

			Rectangle {
				anchors {
					fill: parent
					topMargin: 8
					leftMargin: 8
					rightMargin: 8
				}
				implicitHeight: 36
				color: "transparent"

				Rectangle {
					anchors.verticalCenter: parent.verticalCenter
					anchors.left: parent.left
					implicitWidth: workspaces.implicitWidth + 12*2
					height: parent.height
					color: Flexoki.bg
					radius: 18

					Row {
						id: workspaces
						anchors.centerIn: parent
						height: 20
						spacing: 6

						Repeater {
							model: 10

							delegate: Rectangle {
								property HyprlandWorkspace ws: {
									Hyprland.workspaces.values.find(ws => ws.id === index + 1) || null
								}
								property bool focused: {
									ws && ws.monitor.name === root.screen.name && ws.focused
								}
								property bool occupied: {
									ws && ws.monitor.name === root.screen.name && ws.toplevels.values.length > 0
								}

								width: 20
								height: 20
								radius: 10

								color: {
									if (!focused) return "transparent"
									return occupied ? Flexoki.re : Flexoki.ui3
								}

								border.width: 2
								border.color: occupied ? Flexoki.re : Flexoki.ui3
							}
						}
					}
				}

				Music {}

				Rectangle {
					anchors.verticalCenter: parent.verticalCenter
					anchors.right: parent.right
					implicitWidth: status.implicitWidth + 12*2
					height: parent.height
					color: Flexoki.bg
					radius: 18

					RowLayout {
						id: status
						anchors.centerIn: parent
						implicitHeight: parent.implicitHeight
						spacing: 24

						Text {
							text: {
								//     
								var icon
								if (Volume.volume == 0) {
									icon = " "
								} else if (Volume.volume < 50) {
									icon = " "
								} else {
									icon = "  "
								}
								return icon + Volume.volume + "%"
							}
							color: Flexoki.re
							font { family: root.fontFamily; pixelSize: root.fontSize }
						}

						Text {
							text: Wifi.ssid == "" ? "󰖪 " : "󰖩 " + Wifi.ssid
							color: Flexoki.or
							font { family: root.fontFamily; pixelSize: root.fontSize }
						}

						Text {
							text: " " + Brightness.brightness + "%"
							color: Flexoki.ye
							font { family: root.fontFamily; pixelSize: root.fontSize }
						}

						Text {
							text: {
								var icon
								var i = Math.floor((Battery.capacity - 1) / 10)
								switch (Battery.status) {
									case "Full":
										icon = "󰂄"
										break
									case "Discharging":
										icon = ["󰁺","󰁻","󰁼","󰁽","󰁾","󰁿","󰂀","󰂁","󰂂","󰁹"][i]
										break
									case "Charging":
										icon = ["󰢜","󰂆","󰂇","󰂈","󰢝","󰂉","󰢞","󰂊","󰂋","󰂅"][i]
										break
								}
							  return icon + " " + Battery.capacity + "%"
							}
							color: Flexoki.gr
							font { family: root.fontFamily; pixelSize: root.fontSize }
						}

						Text {
							text: " " + Qt.formatDateTime(Time.time, "MMM d hh:mm:ss")
							color: Flexoki.bl
							font { family: root.fontFamily; pixelSize: root.fontSize }
						}

						Text {
							text: "󰐥"
							color: Flexoki.pu
							font { family: root.fontFamily; pixelSize: root.fontSize * 1.5 }
						}
					}
				}
			}
		}
	}
}