import Quickshell
import Quickshell.Io
import QtQuick
import QtQuick.Layouts

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: tags.implicitWidth + 12*2
					height: parent.height
					color: Flexoki.bg
					radius: 18

					RowLayout {
						id: tags
						anchors.centerIn: parent
						implicitHeight: parent.implicitHeight
						spacing: 6

						Repeater {
							model: Tags.tags

							delegate: Rectangle {
								required property bool focused
								required property bool occupied

								width: 20
								height: 20
								radius: 10

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

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

				RowLayout {
					anchors.centerIn: parent
					implicitHeight: parent.implicitHeight
					spacing: 4

					Rectangle {
						implicitWidth: song.implicitWidth + 16*2
						height: parent.height
						color: Flexoki.bg

						bottomLeftRadius: 18
						topLeftRadius: 18
						bottomRightRadius: 4
						topRightRadius: 4

						Text {
							id: song
							anchors.centerIn: parent
							text: Song.artist + " - " + Song.title
							color: Flexoki.tx
							font { family: root.fontFamily; pixelSize: root.fontSize }
						}
					}

					Rectangle {
						implicitWidth: cava.implicitWidth + 16*2
						height: parent.height
						color: Flexoki.bg

						bottomLeftRadius: 4
						topLeftRadius: 4
						bottomRightRadius: 18
						topRightRadius: 18

						Row {
							id: cava
							anchors.centerIn: parent
							height: 15 + 4
							spacing: 2

							Repeater {
								model: 8

								delegate: Rectangle {
									y: 15 - Cava.heights[index]
									width: 8
									height: Cava.heights[index] + 4
									radius: 4
									color: Flexoki.tx
								}
							}
						}
					}
				}

				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.round((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: " " + Time.time
							color: Flexoki.bl
							font { family: root.fontFamily; pixelSize: root.fontSize }
						}

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