pragma ComponentBehavior: Bound

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

DialogRowButton {
	id: root

	required property var model
	property var selectedItem

	function keyFor(item: var): string {
		return item.id;
	}

	function labelFor(item: var): string {
		return item.label;
	}

	acceptAllowed: !!selectedItem
	horizontalContentMargin: -Tokens.padding.extraSmall
	separateContent: true

	content: Component {
		VerticalFadeListView {
			bottomMargin: Tokens.padding.large
			model: root.model
			spacing: 0
			topMargin: Tokens.padding.large

			delegate: CustomRect {
				id: item

				required property var modelData
				readonly property bool selected: root.selectedItem === root.keyFor(modelData)

				anchors.left: ListView.view.contentItem.left
				anchors.margins: 1 // Gets cut off for some reason without this
				anchors.right: ListView.view.contentItem.right
				color: Qt.alpha(Colors.palette.m3tertiaryContainer, selected ? 1 : 0)
				implicitHeight: label.implicitHeight + Tokens.padding.small * 2
				radius: stateLayer.pressed ? Tokens.rounding.extraSmall : selected ? Tokens.rounding.largeIncreased : Tokens.rounding.medium

				Behavior on radius {
					Anim {
						type: Anim.SlowEffects
					}
				}

				StateLayer {
					id: stateLayer

					onClicked: root.selectedItem = root.keyFor(item.modelData)
				}

				CustomText {
					id: label

					anchors.left: parent.left
					anchors.margins: Tokens.padding.large
					anchors.right: item.selected ? checkIcon.left : parent.right
					anchors.rightMargin: item.selected ? Tokens.spacing.medium : anchors.margins
					anchors.verticalCenter: parent.verticalCenter
					color: item.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
					elide: Text.ElideRight
					font.pointSize: Tokens.font.size.smaller
					text: root.labelFor(item.modelData)
				}

				MaterialIcon {
					id: checkIcon

					anchors.margins: Tokens.padding.large
					anchors.right: parent.right
					anchors.verticalCenter: parent.verticalCenter
					color: Colors.palette.m3onTertiaryContainer
					font.pointSize: Tokens.font.size.normal
					opacity: item.selected ? 1 : 0
					text: "check"

					Behavior on opacity {
						Anim {
							type: Anim.SlowEffects
						}
					}
				}
			}
		}
	}

	onOpenChanged: {
		if (open)
			selectedItem = null;
	}
}