pragma ComponentBehavior: Bound

import Quickshell
import QtQuick
import QtQuick.Layouts
import ZShell.Config
import ZShell
import qs.Components

Item {
	id: root

	readonly property var dashboardTabs: {
		const allTabs = [
			{
				component: dashComponent,
				iconName: "dashboard",
				text: qsTr("Dashboard"),
				enabled: Config.dashboard.showDashboard
			},
			{
				component: weatherComponent,
				iconName: "cloud",
				text: qsTr("Weather"),
				enabled: Config.dashboard.showWeather
			},
			{
				component: mediaComponent,
				iconName: "queue_music",
				text: qsTr("Media"),
				enabled: Config.dashboard.showMedia
			},
			{
				component: procsComponent,
				iconName: "speed",
				text: qsTr("Processes"),
				enabled: Config.dashboard.showProcesses
			},
		];
		return allTabs.filter(tab => tab.enabled);
	}
	readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + viewWrapper.anchors.margins + viewWrapper.anchors.topMargin
	readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
	required property ScreenState screenState

	implicitHeight: nonAnimHeight
	implicitWidth: nonAnimWidth

	Behavior on implicitHeight {
		Anim {
			type: Anim.SlowEffects
		}
	}
	Behavior on implicitWidth {
		Anim {
			type: Anim.SlowEffects
		}
	}

	Tabs {
		id: tabs

		anchors.left: parent.left
		anchors.margins: Tokens.padding.small
		anchors.right: parent.right
		anchors.top: parent.top
		anchors.topMargin: ZUtils.clamp(anchors.margins - Config.bar.border, 0, anchors.margins)
		nonAnimWidth: view.implicitWidth
		screenState: root.screenState
		tabs: root.dashboardTabs
	}

	Item {
		id: viewWrapper

		property int radius: Tokens.rounding.extraLarge - anchors.margins

		anchors.bottom: parent.bottom
		anchors.left: parent.left
		anchors.margins: Tokens.padding.small
		anchors.right: parent.right
		anchors.top: tabs.bottom
		anchors.topMargin: Tokens.spacing.small
		clip: view.currentIndex !== 3 || (!view.currentItem?.settled ?? true)

		Item {
			id: view

			readonly property int currentIndex: root.screenState.dashboardTab
			readonly property Item currentItem: {
				repeater.count;
				return repeater.itemAt(currentIndex);
			}

			anchors.fill: parent
			implicitHeight: currentItem?.implicitHeight ?? 0
			implicitWidth: currentItem?.implicitWidth ?? 0

			Repeater {
				id: repeater

				delegate: Loader {
					id: paneLoader

					required property int index
					required property var modelData

					readonly property real targetX: index < view.currentIndex ? -view.implicitWidth : index > view.currentIndex ? view.implicitWidth : 0
					readonly property bool settled: x === targetX

					active: index === view.currentIndex || opacity > 0
					opacity: index === view.currentIndex ? 1 : 0
					sourceComponent: modelData.component
					visible: opacity > 0
					x: targetX
					y: 0

					Behavior on opacity {
						Anim {
							type: Anim.DefaultEffects
						}
					}
					Behavior on x {
						Anim {
							type: Anim.DefaultEffects
						}
					}
				}
				model: ScriptModel {
					values: root.dashboardTabs
				}
			}

			Component {
				id: dashComponent

				Dash {
					radius: viewWrapper.radius
					screenState: root.screenState
				}
			}

			Component {
				id: weatherComponent

				WeatherTab {
					radius: viewWrapper.radius
				}
			}

			Component {
				id: mediaComponent

				Media {
					radius: viewWrapper.radius
					screenState: root.screenState
				}
			}

			Component {
				id: procsComponent

				ProcessesTab {
					radius: viewWrapper.radius
				}
			}
		}
	}
}