pragma ComponentBehavior: Bound

import QtQuick
import ZShell.Blobs
import qs.Components
import ZShell.Config
import qs.Services

CustomClippingRect {
	id: root

	property color blobColor: Colors.tPalette.m3surfaceContainerLow
	readonly property real ratio: 16.0 / 9.0
	readonly property SettingsState sState: SettingsState {
		id: sState

		onClose: root.close()
	}

	signal close

	implicitHeight: sState.screen.height * 0.7
	implicitWidth: implicitHeight * ratio
	radius: Tokens.rounding.largeIncreased + Tokens.padding.small

	Behavior on blobColor {
		CAnim {}
	}

	TapHandler {
		onTapped: root.focus = true
	}

	BlobGroup {
		id: blobGroup

		color: root.blobColor
		smoothing: Tokens.rounding.medium
	}

	BlobInvertedRect {
		anchors.fill: parent
		borderBottom: Tokens.padding.small
		borderLeft: navPane.width + navPane.anchors.margins * 2
		borderRight: Tokens.padding.small
		borderTop: Tokens.padding.small
		group: blobGroup
		opacity: root.blobColor.a
		radius: Tokens.rounding.largeIncreased
	}

	NavPane {
		id: navPane

		anchors.bottom: parent.bottom
		anchors.left: parent.left
		anchors.margins: Tokens.padding.large
		anchors.top: parent.top
		sState: root.sState
		width: Math.min(600, Math.round(root.width / 3))
	}

	Pages {
		anchors.bottom: parent.bottom
		anchors.left: navPane.right
		anchors.leftMargin: navPane.anchors.margins + anchors.margins
		anchors.margins: Tokens.padding.extraLarge
		anchors.right: parent.right
		anchors.top: parent.top
		sState: root.sState
	}
}