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

CustomSwitch {
	id: root

	readonly property alias bg: bg
	property alias first: bg.first
	property alias last: bg.last
	property string settingAnchor
	property string subtext
	property string iconText

	function flashHighlight(): void {
		bg.flashHighlight();
	}

	Layout.fillWidth: true
	cLayer: 2
	horizontalPadding: Tokens.padding.largeIncreased
	implicitHeight: Math.max(implicitContentHeight, implicitIndicatorHeight) + verticalPadding * 2
	implicitWidth: implicitContentWidth + implicitIndicatorWidth + horizontalPadding * 2
	indicator.anchors.right: right
	indicator.anchors.rightMargin: root.horizontalPadding
	indicator.anchors.verticalCenter: verticalCenter
	verticalPadding: Tokens.padding.small

	background: ConnectedRect {
		id: bg

		StateLayer {
			id: stateLayer

			manualPressOverride: root.pressed
		}
	}
	contentItem: Item {
		anchors.left: parent.left
		anchors.leftMargin: root.horizontalPadding
		anchors.right: root.indicator.left
		anchors.rightMargin: Tokens.spacing.medium
		implicitHeight: column.implicitHeight
		implicitWidth: column.implicitWidth

		Column {
			id: column

			anchors.left: parent.left
			anchors.right: parent.right
			anchors.verticalCenter: parent.verticalCenter
			spacing: 0

			CustomText {
				id: label

				anchors.left: parent.left
				anchors.right: parent.right
				elide: Text.ElideRight
				font.pointSize: Tokens.font.size.smaller
				opacity: root.enabled ? 1 : 0.5
				text: root.text

				Behavior on opacity {
					Anim {}
				}
			}

			CustomText {
				id: subtext

				anchors.left: parent.left
				anchors.right: parent.right
				color: Colors.palette.m3outline
				elide: Text.ElideRight
				font.pointSize: Tokens.font.size.small
				opacity: root.enabled ? 1 : 0.5
				text: root.subtext
				visible: root.subtext

				Behavior on opacity {
					Anim {}
				}
			}

			MaterialIcon {
				id: icon
				anchors.right: parent.right
				anchors.verticalCenter: parent.verticalCenter
				text: root.iconText ?? ""
			}
		}
	}

	onPressed: stateLayer.press(stateLayer.mouseX, stateLayer.mouseY)
}
