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

Item {
	id: root

	property real animDriver
	property alias color: blobGroup.color
	default required property Item content
	property bool hoverOverride
	readonly property alias hovered: btn.containsMouse
	property alias icon: icon.text
	property bool open
	property int padding
	property bool pressOverride
	property int topMovement: Tokens.padding.large

	implicitHeight: btn.implicitHeight * 0.9
	implicitWidth: btn.implicitWidth * 0.9

	Binding {
		property: "opacity"
		target: root.content
		value: root.animDriver
	}

	BlobGroup {
		id: blobGroup

		color: Colors.palette.m3surfaceContainerHighest
		cornerFill: false
		smoothing: Tokens.rounding.largeIncreased

		Behavior on color {
			CAnim {
			}
		}
	}

	BlobRect {
		id: btnRect

		anchors.fill: parent
		anchors.margins: (!(btn.pressed || root.pressOverride) && (btn.containsMouse || root.hoverOverride) ? -Tokens.padding.extraSmall : 0) + (root.open ? -Tokens.padding.extraSmall : 0)
		group: blobGroup
		radius: root.open ? Tokens.rounding.largeIncreased : Tokens.rounding.largeIncreased

		Behavior on anchors.margins {
			Anim {
			}
		}
		Behavior on radius {
			Anim {
				type: Anim.DefaultEffects
			}
		}
	}

	BlobRect {
		id: rect

		anchors.right: parent.right
		anchors.top: parent.top
		deformScale: 0.00001
		group: blobGroup
		implicitHeight: parent.height
		implicitWidth: parent.width
		radius: Tokens.rounding.small + Tokens.padding.extraSmall

		states: State {
			name: "open"
			when: root.open

			PropertyChanges {
				rect.anchors.rightMargin: root.width - Tokens.spacing.small
				rect.anchors.topMargin: -root.topMovement
				rect.implicitHeight: root.content.implicitHeight + root.padding * 2
				rect.implicitWidth: root.content.implicitWidth + root.padding * 2
				root.animDriver: 1
			}
		}
		transitions: Transition {
			Anim {
				properties: "rightMargin,implicitWidth"
			}

			Anim {
				duration: Tokens.anim.durations.expressiveFastEffects
				easing: Tokens.anim.expressiveFastEffects
				properties: "topMargin,implicitHeight"
			}

			Anim {
				property: "animDriver"
				type: Anim.DefaultEffects
			}
		}

		MouseArea { // MouseArea to catch inputs
			anchors.fill: parent
			children: [root.content]
			clip: true
		}
	}

	MouseArea {
		id: btn

		anchors.centerIn: parent
		cursorShape: Qt.PointingHandCursor
		hoverEnabled: true
		implicitHeight: icon.implicitHeight + Tokens.padding.extraSmall * 2
		implicitWidth: implicitHeight

		onClicked: root.open = !root.open

		MaterialIcon {
			id: icon

			anchors.centerIn: parent
			color: Colors.palette.m3onSurfaceVariant
			font.pointSize: Tokens.font.size.normal
			text: "view_apps"
		}
	}
}