pragma ComponentBehavior: Bound

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

PageBase {
	id: root

	isSubPage: true
	title: qsTr("Old network page")

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

	ColumnLayout {
		id: networkContent

		anchors.horizontalCenter: parent.horizontalCenter
		anchors.top: parent.top
		spacing: Tokens.spacing.extraSmall / 2
		width: root.cappedWidth

		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 {
					roleValue: false

					delegate: KnownNetworkManager {
					}
				}

				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),
								{
									isDivider: false
								}
							] : []), ...(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.centerIn: parent
		}
	}

	component KnownNetworkManager: NetworkSelect {
		acceptLabel: qsTr("Remove")
		enabled: Object.keys(model).length > 0
		header: qsTr("Manage known networks")
		icon: "Network_Manage"
		label: qsTr("Manage known networks")
		model: Network.networks.filter(n => n.known && !n.connected).map(n => ({
					id: n.name,
					label: n.name
				}))
		rootParent: root.flickable
		width: rows.width

		onAccepted: {
			if (!selectedItem)
				return;

			const networkToForget = Network.networks.find(n => n.name === selectedItem);
			Network.forgetNetwork(networkToForget);
		}
	}
	component NetworkSelect: DialogRowButton {
		id: klist

		required property var model
		property var selectedItem

		function keyFor(item: var): string {
			return item.id;
		}

		function labelFor(item: var): string {
			return item.label;
		}

		acceptAllowed: !!selectedItem
		horizontalContentMargin: -Tokens.padding.extraSmall
		separateContent: true

		content: Component {
			VerticalFadeListView {
				bottomMargin: Tokens.padding.large
				model: klist.model
				spacing: 0
				topMargin: Tokens.padding.large

				delegate: CustomRect {
					id: item

					required property var modelData
					readonly property bool selected: klist.selectedItem === klist.keyFor(modelData)

					anchors.left: ListView.view.contentItem.left
					anchors.margins: 1 // Gets cut off for some reason without this
					anchors.right: ListView.view.contentItem.right
					color: Qt.alpha(Colors.palette.m3tertiaryContainer, selected ? 1 : 0)
					implicitHeight: label.implicitHeight + Tokens.padding.small * 2
					radius: stateLayer.pressed ? Tokens.rounding.extraSmall : selected ? Tokens.rounding.largeIncreased : Tokens.rounding.medium

					Behavior on radius {
						Anim {
							type: Anim.SlowEffects
						}
					}

					StateLayer {
						id: stateLayer

						onClicked: klist.selectedItem = klist.keyFor(item.modelData)
					}

					CustomText {
						id: label

						anchors.left: parent.left
						anchors.margins: Tokens.padding.large
						anchors.right: item.selected ? checkIcon.left : parent.right
						anchors.rightMargin: item.selected ? Tokens.spacing.medium : anchors.margins
						anchors.verticalCenter: parent.verticalCenter
						color: item.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
						elide: Text.ElideRight
						font.pointSize: Tokens.font.size.smaller
						text: klist.labelFor(item.modelData)
					}

					MaterialIcon {
						id: checkIcon

						anchors.margins: Tokens.padding.large
						anchors.right: parent.right
						anchors.verticalCenter: parent.verticalCenter
						color: Colors.palette.m3onTertiaryContainer
						font.pointSize: Tokens.font.size.normal
						opacity: item.selected ? 1 : 0
						text: "check"

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

		onOpenChanged: {
			if (open)
				selectedItem = null;
		}
	}
}