import QtQuick
import QtQuick.Layouts
import ZShell.Config
import qs.Modules.Settings.Common
import qs.Modules.Bar.Popouts.Network
import qs.Components
import qs.Helpers
import qs.Helpers.Network
import qs.Services

ConnectedRect {
	id: networkItem

	readonly property int connectedCount: Network.connectedNetworks.length
	readonly property bool connecting: Network.connectingNetwork === modelData
	property int horizontalPadding: Tokens.padding.largeIncreased
	readonly property bool inConnectedGroup: index < connectedCount
	// sectioning first / last item in list reminder
	// if index === network.connectedNetworks.length - 1
	// if index === network.connectedNetworks.length - 1 + network.knownNetworks.length - 2
	// if index === network.connectedNetworks.length - 1 + network.knownNetworks.length
	// list.model.values.length - 1
	required property int index
	readonly property bool isSecure: Network.isSecure(modelData.security)
	required property ListView list
	required property var modelData
	property int verticalPadding: Tokens.padding.smaller

	Layout.fillWidth: true
	first: !inConnectedGroup && index === connectedCount + 1
	implicitHeight: rowLayout.implicitHeight + verticalPadding * 2
	last: inConnectedGroup ? index === connectedCount - 1 : index === (list?.count ?? -1)
	radius: Tokens.rounding.small

	RowLayout {
		id: rowLayout

		Layout.preferredHeight: visible ? rowLayout.implicitHeight + Tokens.padding.smaller * 2 : 0
		anchors.fill: parent
		anchors.leftMargin: networkItem.horizontalPadding
		anchors.rightMargin: networkItem.horizontalPadding

		Column {
			id: column

			Layout.fillWidth: true

			CustomText {
				Layout.fillWidth: true
				Layout.leftMargin: Tokens.spacing.extraSmall
				Layout.rightMargin: Tokens.spacing.extraSmall
				color: networkItem.modelData.active ? Colors.palette.m3primary : Colors.palette.m3onSurface
				elide: Text.ElideRight
				text: networkItem.modelData.name ? networkItem.modelData.name : qsTr("Unknown Network")
			}

			CustomText {
				id: subtext

				anchors.left: parent.left
				anchors.right: parent.right
				color: Colors.palette.m3outline
				elide: Text.ElideRight
				font.pointSize: Tokens.font.size.small
				text: networkItem.modelData.connected ? qsTr("Connected: %1 strength").arg(Math.round(networkItem.modelData.signalStrength * 100) + "%") : qsTr("%1 strength").arg(Math.round(networkItem.modelData.signalStrength * 100) + "%")
			}
		}

		Item {
			Layout.alignment: Qt.AlignRight
			implicitHeight: icon.height
			implicitWidth: icon.width

			MaterialIcon {
				id: icon

				color: networkItem.modelData.active ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
				font.pointSize: Tokens.font.size.large
				opacity: networkItem.connecting ? 0 : 1
				text: Icons.getNetworkIcon(networkItem.modelData.signalStrength * 100, networkItem.isSecure)

				Behavior on opacity {
					Anim {
					}
				}
			}

			Loader {
				active: opacity > 0
				anchors.fill: parent
				opacity: networkItem.connecting ? 1 : 0

				Behavior on opacity {
					Anim {
					}
				}
				sourceComponent: CircularIndicator {
					bgColor: "transparent"
					running: true
				}
			}
		}
	}

	StateLayer {
		color: networkItem.modelData.active ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface

		onClicked: {
			if (networkItem.isSecure && !networkItem.known) {
				PopupManager.requestOpen(Qt.resolvedUrl("../../Modules/Bar/Popouts/Network/PSKOverlay.qml"), {
					network: networkItem.modelData
				});
			} else {
				Network.requestConnect(networkItem.modelData);
			}
		}
	}
}