pragma ComponentBehavior: Bound

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

ConnectedRect {
	id: root

	property alias icon: iconLabel.text
	readonly property alias iconLabel: iconLabel
	readonly property alias label: label
	property alias stateEnabled: stateLayer.enabled
	readonly property alias subLabel: subLabel
	property alias subtext: subLabel.text
	property alias text: label.text
	property string trailingIcon
	property string activeItem

	signal clicked(event: MouseEvent)

	Layout.fillWidth: true
	implicitHeight: row.implicitHeight + Tokens.padding.small * 2

	StateLayer {
		id: stateLayer

		onClicked: e => root.clicked(e)
	}

	RowLayout {
		id: row

		anchors.left: parent.left
		anchors.margins: Tokens.padding.largeIncreased
		anchors.right: parent.right
		anchors.verticalCenter: parent.verticalCenter
		opacity: root.enabled ? 1 : 0.5
		spacing: Tokens.spacing.medium

		Behavior on opacity {
			Anim {}
		}

		MaterialIcon {
			id: iconLabel

			color: Colors.palette.m3onSurfaceVariant
			visible: root.icon !== ""
			fill: 1
			text: root.icon
			font.pointSize: Tokens.font.size.normal
		}

		Column {
			id: column

			Layout.fillWidth: true
			spacing: 0

			CustomText {
				id: label

				anchors.left: parent.left
				anchors.right: parent.right
				elide: Text.ElideRight
				font.pointSize: Tokens.font.size.small
			}

			CustomText {
				id: subLabel

				anchors.left: parent.left
				anchors.right: parent.right
				color: Colors.palette.m3outline
				elide: Text.ElideRight
				font.pointSize: Tokens.font.size.small
				visible: text
			}
		}

		Loader {
			active: root.activeItem && root.subtext
			asynchronous: true
			visible: active
			Layout.fillHeight: true

			sourceComponent: CustomRect {
				color: Colors.palette.m3secondaryContainer
				radius: Tokens.rounding.full
				implicitWidth: text.implicitWidth + Tokens.padding.medium * 2

				CustomText {
					id: text
					anchors.centerIn: parent
					color: Colors.palette.m3onSecondaryContainer
					text: root.activeItem
				}
			}
		}

		Loader {
			active: root.trailingIcon
			asynchronous: true
			visible: active

			sourceComponent: MaterialIcon {
				color: Colors.palette.m3onSurfaceVariant
				font.pointSize: Tokens.font.size.normal
				text: root.trailingIcon
			}
		}
	}
}