import Quickshell
import QtQuick
import QtQuick.Layouts
import qs.Helpers
import qs.Components
import qs.Modules
import ZShell.Config
import qs.Modules.Dashboard.Dash
import qs.Services

GridLayout {
	id: root

	required property PersistentProperties dashState
	readonly property bool dashboardVisible: visibilities.dashboard
	property int radius: Tokens.rounding.medium
	required property PersistentProperties visibilities

	columnSpacing: Tokens.spacing.small
	rowSpacing: Tokens.spacing.small

	ParallelAnimation {
		id: openAnim

		Anim {
			property: "opacity"
			target: root
			to: 1
		}

		Anim {
			property: "scale"
			target: root
			to: 1
		}
	}

	ParallelAnimation {
		id: closeAnim

		Anim {
			property: "opacity"
			target: root
			to: 0
		}

		Anim {
			property: "scale"
			target: root
			to: 0.9
		}
	}

	Rect {
		Layout.column: 2
		Layout.columnSpan: 3
		Layout.preferredHeight: user.implicitHeight
		Layout.preferredWidth: user.implicitWidth
		radius: root.radius

		User {
			id: user

			dashState: root.dashState
		}
	}

	Rect {
		Layout.columnSpan: 2
		Layout.fillHeight: true
		Layout.preferredWidth: Config.dashboard.sizes.weatherWidth
		Layout.row: 0
		radius: root.radius

		Weather {
		}
	}

	Rect {
		Layout.column: 0
		Layout.columnSpan: 3
		Layout.fillWidth: true
		Layout.preferredHeight: calendar.implicitHeight
		Layout.row: 1
		radius: root.radius

		Calendar {
			id: calendar

			dashState: root.dashState
		}
	}

	Rect {
		Layout.column: 3
		Layout.columnSpan: 2
		Layout.fillHeight: true
		Layout.preferredWidth: resources.implicitWidth
		Layout.row: 1
		radius: root.radius

		Resources {
			id: resources
		}
	}

	CustomClippingRect {
		Layout.column: 0
		Layout.columnSpan: 5
		Layout.fillWidth: true
		Layout.preferredHeight: media.implicitHeight
		Layout.row: 2
		color: Colors.tPalette.m3surfaceContainer
		radius: root.radius

		Media {
			id: media
		}
	}

	component Rect: CustomRect {
		color: Colors.tPalette.m3surfaceContainer
	}
}