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

CustomClippingRect {
	id: root

	required property var network

	color: Colors.palette.m3surfaceContainer
	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
	implicitWidth: layout.implicitWidth + layout.anchors.margins * 2
	radius: Tokens.rounding.large

	ColumnLayout {
		id: layout

		anchors.fill: parent
		anchors.margins: Tokens.padding.extraLarge
		spacing: Tokens.spacing.normal

		MaterialIcon {
			Layout.alignment: Qt.AlignHCenter
			font.pointSize: Tokens.font.size.extraLarge * 2
			text: "lock"
		}

		CustomText {
			Layout.alignment: Qt.AlignHCenter
			color: Colors.palette.m3onSurfaceVariant
			text: qsTr("Connect to %1").arg(root.network.name)
		}

		CustomTextField {
			id: passwordField

			Layout.fillWidth: true
			Layout.preferredWidth: 400
			echoMode: CustomTextField.Password
			errorText: qsTr("Failed to connect with given password")
			isError: Network.failedNetwork
			leadingIcon: "lock"
			passwordMaskDelay: 5000
			placeholderText: qsTr("Input password")
		}

		ButtonRow {
			id: buttonRow

			Layout.fillWidth: true
			spacing: Tokens.spacing.smaller

			IconTextButton {
				fillWidth: true
				font.pointSize: Tokens.font.size.normal
				icon: "close"
				inactiveColor: Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
				inactiveOnColor: Colors.palette.m3onSurfaceVariant
				isRound: true
				isToggle: false
				shapeMorph: true
				text: "Cancel"

				onClicked: PopupManager.requestClose()
			}

			IconTextButton {
				fillWidth: true
				font.pointSize: Tokens.font.size.normal
				icon: Network.connectingNetwork ? "" : "check"
				inactiveColor: Network.connectingNetwork ? Colors.palette.m3primaryContainer : Network.failedNetwork ? Colors.palette.m3error : Colors.palette.m3primary
				inactiveOnColor: Network.connectingNetwork ? Colors.palette.m3onPrimaryContainer : Network.failedNetwork ? Colors.palette.m3onError : Colors.palette.m3onPrimary
				isRound: true
				isToggle: false
				shapeMorph: true
				text: Network.connectingNetwork ? "" : "Apply"

				onClicked: Network.requestConnect(root.network, passwordField.text)

				Loader {
					active: opacity > 0
					anchors.centerIn: parent
					opacity: Network.connectingNetwork ? 1 : 0

					Behavior on opacity {
						Anim {
						}
					}
					sourceComponent: CircularIndicator {
						bgColor: "transparent"
						implicitSize: buttonRow.height - Tokens.padding.normal
						running: true
					}
				}
			}
		}
	}
}