pragma ComponentBehavior: Bound

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

CustomClippingRect {
	id: root

	required property var wrapper

	anchors.horizontalCenter: parent.horizontalCenter
	implicitHeight: networkPopContent.height + networkPopContent.anchors.margins * 2
	implicitWidth: 500 + 8 * 2
	radius: (20 - Tokens.padding.small) * Tokens.rounding.scale

	Component.onCompleted: Network.active = true
	Component.onDestruction: Network.active = false

	ColumnLayout {
		id: networkPopContent

		anchors.left: parent.left
		anchors.margins: Tokens.padding.large
		anchors.right: parent.right
		anchors.top: parent.top
		spacing: Tokens.spacing.extraSmall / 2

		CustomText {
			Layout.preferredHeight: visible ? implicitHeight : 0
			Layout.rightMargin: Tokens.padding.extraSmall
			font.pointSize: Tokens.font.size.large
			text: qsTr("Wifi")
		}

		Toggle {
			Layout.preferredHeight: visible ? implicitHeight : 0
			checked: Network.wifiEnabled
			first: true
			last: Network.connectedNetworks.length === 0
			subtext: qsTr("Toggle WiFi device state")
			text: checked ? qsTr("Enabled") : qsTr("Disabled")

			onToggled: Network.setWifi(checked)
		}

		ListView {
			id: rows

			Layout.fillWidth: true
			Layout.preferredHeight: contentHeight
			interactive: false
			section.property: "connected"
			spacing: Tokens.spacing.extraSmall / 2

			add: Transition {
				Anim {
					from: 0
					property: "opacity"
					to: 1
				}
			}
			delegate: DelegateChooser {
				role: "isDivider"

				DelegateChoice {
					roleValue: true

					delegate: NetworkDivider {
					}
				}

				DelegateChoice {
					delegate: NetworkItem {
						list: rows
						width: rows.width
					}
				}
			}
			displaced: Transition {
				Anim {
					easing.type: Easing.OutCubic
					property: "y"
				}
			}
			model: ScriptModel {
				values: {
					const byStrengthName = (a, b) => b.signalStrength - a.signalStrength || a.name.localeCompare(b.name);
					const cNetworks = [...Network.connectedNetworks];
					const kNetworks = [...Network.knownNetworks];
					const uNetworks = [...Network.unknownNetworks];

					return [...cNetworks.sort(byStrengthName), ...(kNetworks.length > 0 ? [
								{
									isDivider: true,
									type: "known"
								},
								...kNetworks.sort(byStrengthName)] : []), ...(uNetworks.length > 0 ? [
								{
									isDivider: true,
									type: "unknown"
								},
								...uNetworks.sort(byStrengthName)] : [])];
				}
			}
			move: Transition {
				Anim {
					easing.type: Easing.OutCubic
					property: "y"
				}
			}
			remove: Transition {
				Anim {
					property: "opacity"
					to: 0
				}
			}
			section.delegate: Rectangle {
				required property string section

				color: "transparent"
				height: childrenRect.height
				width: ListView.view.width

				CustomText {
					text: parent.section
				}
			}
		}
	}

	NetworkOverlay {
		anchors.fill: parent
	}
}