pragma ComponentBehavior: Bound

import ZShell.Config
import QtQuick
import QtQuick.Layouts
import qs.Components
import qs.Modules.Notifications.Sidebar.Chat
import qs.Services

Item {
	id: root

	required property Props props
	required property var visibilities

	Connections {
		function onIsWindowChanged(): void {
			if (ChatState.isWindow)
				root.props.currentTab = 0;
		}

		target: ChatState
	}

	ColumnLayout {
		id: layout

		anchors.fill: parent
		spacing: Tokens.spacing.small

		Tabs {
			Layout.fillWidth: true
			Layout.preferredHeight: ChatState.isWindow || !Config.llm.enabled ? 0 : implicitHeight
			dashState: root.props
			nonAnimWidth: layout.width
			visible: height > 0
		}

		CustomClippingRect {
			Layout.fillHeight: true
			Layout.fillWidth: true
			radius: Tokens.rounding.small

			Item {
				id: pages

				anchors.bottom: parent.bottom
				anchors.top: parent.top
				implicitWidth: parent.width
				opacity: root.props.currentTab === 0 ? 1 : 0
				visible: opacity > 0
				x: root.props.currentTab === 0 ? 0 : -root.width

				Behavior on opacity {
					Anim {}
				}
				Behavior on x {
					Anim {}
				}

				CustomRect {
					anchors.fill: parent
					color: Colors.tPalette.m3surfaceContainerLow
					radius: Tokens.rounding.small

					NotifDock {
						props: root.props
						visibilities: root.visibilities
					}
				}
			}

			Loader {
				id: chatLoader

				anchors.bottom: parent.bottom
				anchors.top: parent.top
				active: Config.llm.enabled
				width: parent.width

				sourceComponent: Item {
					id: chatPage

					opacity: root.props.currentTab === 1 ? 1 : 0
					visible: opacity > 0
					x: root.props.currentTab === 0 ? root.width : 0
					z: 1

					Behavior on opacity {
						Anim {}
					}

					Behavior on x {
						Anim {}
					}

					CustomRect {
						anchors.fill: parent
						color: Colors.tPalette.m3surfaceContainerLow
						radius: Tokens.rounding.small

						ChatPanel {
							anchors.fill: parent
						}
					}
				}
			}
		}

		CustomRect {
			Layout.fillWidth: true
			Layout.topMargin: Tokens.padding.small - layout.spacing
			color: Colors.tPalette.m3outlineVariant
			implicitHeight: 1
		}
	}
}