pragma ComponentBehavior: Bound

import QtQuick
import qs.Config
import qs.Components

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: -Appearance.padding.small
	separateContent: true

	content: Component {
		VerticalFadeListView {
			bottomMargin: Appearance.padding.large
			model: root.model
			spacing: 0
			topMargin: Appearance.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(DynamicColors.palette.m3tertiaryContainer, selected ? 1 : 0)
				implicitHeight: label.implicitHeight + Appearance.padding.normal * 2
				radius: stateLayer.pressed ? Appearance.rounding.extraSmall : selected ? Appearance.rounding.large : Appearance.rounding.normal

				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: Appearance.padding.large
					anchors.right: item.selected ? checkIcon.left : parent.right
					anchors.rightMargin: item.selected ? Appearance.spacing.normal : anchors.margins
					anchors.verticalCenter: parent.verticalCenter
					color: item.selected ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
					elide: Text.ElideRight
					font.pointSize: Appearance.font.size.smaller
					text: root.labelFor(item.modelData)
				}

				MaterialIcon {
					id: checkIcon

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

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

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