import Quickshell
import QtQuick
import QtQuick.Layouts
import ZShell.Config
import qs.Modules.Bar.Popouts
import qs.Helpers
import qs.Components
import qs.Services

CustomRect {
	id: root

	required property bool horizontal
	required property GridLayout loader
	required property Wrapper popouts
	readonly property real shortSize: Math.max(Config.bar.height, Tokens.bar.innerSize)
	readonly property real size: timeText.contentWidth + (horizontal ? Tokens.padding.normal : Tokens.padding.larger) * 2
	required property PersistentProperties visibilities

	color: visibilities.dashboard ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
	implicitHeight: horizontal ? shortSize : size
	implicitWidth: horizontal ? size : shortSize
	radius: Tokens.rounding.full

	CustomText {
		id: timeText

		anchors.centerIn: parent
		// anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
		// anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
		color: root.visibilities.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
		font: Config.appearance.font.family.mono // qmllint disable incompatible-type
		height: root.horizontal ? implicitHeight : implicitWidth
		text: Time.dateStr
		width: root.horizontal ? implicitWidth : implicitHeight

		Behavior on color {
			CAnim {
			}
		}
		transform: [
			Translate {
				x: !root.horizontal ? -timeText.implicitWidth + timeText.implicitHeight : 0
			},
			Rotation {
				angle: root.horizontal ? 0 : 270
				origin.x: timeText.implicitHeight / 2
				origin.y: timeText.implicitHeight / 2
			}
		]
	}

	StateLayer {
		acceptedButtons: Qt.LeftButton
		color: root.visibilities.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface

		onClicked: {
			root.visibilities.dashboard = !root.visibilities.dashboard;
		}
	}
}