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

ConnectedRect {
	id: root

	property alias checked: switchButton.checked
	property int horizontalPadding: Tokens.padding.largeIncreased
	property alias subtext: subtext.text
	property alias text: text.text
	property alias icon: icon
	property string iconText: "open_in_new"
	property int verticalPadding: Tokens.padding.small

	signal clicked(event: MouseEvent)
	signal toggled(checked: bool)

	Layout.fillWidth: true
	implicitHeight: layout.implicitHeight + verticalPadding * 2

	Column {
		id: layout

		anchors.left: parent.left
		anchors.leftMargin: root.horizontalPadding
		anchors.right: icon.left
		anchors.rightMargin: Tokens.padding.small
		anchors.verticalCenter: parent.verticalCenter

		CustomText {
			id: text

			font.pointSize: Tokens.font.size.smaller
		}

		CustomText {
			id: subtext

			color: Colors.palette.m3outline
			font.pointSize: Tokens.font.size.small
			wrapMode: Text.WordWrap
		}
	}

	MaterialIcon {
		id: icon

		anchors.right: switchButton.left
		anchors.rightMargin: Tokens.spacing.medium
		anchors.verticalCenter: parent.verticalCenter
		text: root.iconText
	}

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

	CustomSwitch {
		id: switchButton

		anchors.right: parent.right
		anchors.rightMargin: root.horizontalPadding
		anchors.verticalCenter: parent.verticalCenter

		onClicked: root.toggled(checked)
	}
}