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

	signal clicked(event: MouseEvent)

	Layout.fillWidth: true
	implicitHeight: row.implicitHeight + Tokens.padding.normal * 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.normal

		Behavior on opacity {
			Anim {
			}
		}

		MaterialIcon {
			id: iconLabel

			color: Colors.palette.m3onSurfaceVariant
			fill: 1
			font.pointSize: Tokens.font.size.medium
		}

		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.trailingIcon
			asynchronous: true
			visible: active

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