import QtQuick
import QtQuick.Shapes
import QtQuick.Templates
import qs.Config

Switch {
	id: root

	property int cLayer: 1

	implicitHeight: implicitIndicatorHeight
	implicitWidth: implicitIndicatorWidth

	indicator: CustomRect {
		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
		implicitWidth: implicitHeight * 1.7
		radius: Appearance.rounding.full

		CustomRect {
			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight

			anchors.verticalCenter: parent.verticalCenter
			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
			implicitWidth: nonAnimWidth
			radius: Appearance.rounding.full
			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2

			Behavior on implicitWidth {
				Anim {
					type: Anim.FastSpatial
				}
			}
			Behavior on x {
				Anim {
					type: Anim.FastSpatial
				}
			}

			CustomRect {
				anchors.fill: parent
				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
				radius: parent.radius

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

			Shape {
				id: icon

				property point end1: {
					if (root.pressed) {
						if (root.checked)
							return Qt.point(width * 0.4, height / 2);
						return Qt.point(width * 0.8, height / 2);
					}
					if (root.checked)
						return Qt.point(width * 0.4, height * 0.7);
					return Qt.point(width * 0.85, height * 0.85);
				}
				property point end2: {
					if (root.pressed)
						return Qt.point(width * 0.8, height / 2);
					if (root.checked)
						return Qt.point(width * 0.85, height * 0.2);
					return Qt.point(width * 0.85, height * 0.15);
				}
				property point start1: {
					if (root.pressed)
						return Qt.point(width * 0.2, height / 2);
					if (root.checked)
						return Qt.point(width * 0.15, height / 2);
					return Qt.point(width * 0.15, height * 0.15);
				}
				property point start2: {
					if (root.pressed) {
						if (root.checked)
							return Qt.point(width * 0.4, height / 2);
						return Qt.point(width * 0.2, height / 2);
					}
					if (root.checked)
						return Qt.point(width * 0.4, height * 0.7);
					return Qt.point(width * 0.15, height * 0.85);
				}

				anchors.centerIn: parent
				asynchronous: true
				height: parent.implicitHeight - Appearance.padding.larger
				preferredRendererType: Shape.CurveRenderer
				width: height

				Behavior on end1 {
					PropAnim {
					}
				}
				Behavior on end2 {
					PropAnim {
					}
				}
				Behavior on start1 {
					PropAnim {
					}
				}
				Behavior on start2 {
					PropAnim {
					}
				}

				ShapePath {
					capStyle: ShapePath.RoundCap
					fillColor: "transparent"
					startX: icon.start1.x
					startY: icon.start1.y
					strokeColor: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
					strokeWidth: Appearance.font.size.larger * 0.15

					Behavior on strokeColor {
						CAnim {
						}
					}

					PathLine {
						x: icon.end1.x
						y: icon.end1.y
					}

					PathMove {
						x: icon.start2.x
						y: icon.start2.y
					}

					PathLine {
						x: icon.end2.x
						y: icon.end2.y
					}
				}
			}
		}
	}

	MouseArea {
		anchors.fill: parent
		cursorShape: Qt.PointingHandCursor
		enabled: false
	}

	component PropAnim: PropertyAnimation {
		duration: Appearance.anim.durations.expressiveFastSpatial
		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
	}
}