@using System;
@using Sandbox;
@using Sandbox.UI;
@using Sandbox.Network;
@using System.Runtime.CompilerServices
@inherits PanelComponent
@namespace Sandbox

<root>

	<div class="header">

		<div class="title">#lobby.title</div>
		
		<div class="subtitle">

			<div class="mode">
				<label>#lobby.mode</label> 
				<label>#mode.twoplayers</label>
			</div>
			<div class="mode">@NetworkManager.Instance.GameMode</div>
			
		</div>


	</div>

	<div class="body">

		<div class="playerlist">

			@foreach (var player in Connection.All)
			{
				<div class="player">
					<div class="left">
						@if (player.IsHost)
						{
							<div class="prefix">[Host]</div>
						}
						@if (Networking.IsHost && !player.IsHost)
						{
							<div class="prefix" onclick="@(() => player.Kick("You were kicked by the host"))">❌</div>
						}
						<div class="name">@player.DisplayName</div>
					</div>

					<div class="right">
						<div class="ping">
							<img src="@pingIcon" style="width: 35px; margin: 0px 5px;" alt="Ping" />@player.Latency
						</div>
					</div>
				</div>
			}

			@if (Connection.All.Count < 2)
			{
				<div class="invite">#lobby.invitefriend</div>
			}

		</div>

		<div class="settings">

			<div class="option">
				<label class="option_name">#lobby.settings.privacy</label>
				<div class="adjuster">
					<label class="option_adjust" onclick='@(() => SetLobbyPrivacy("left"))'>&#60;</label>
					<label class="option_value">@LobbyPrivacy</label>
					<label class="option_adjust" onclick='@(() => SetLobbyPrivacy("right"))'>&#62;</label>
				</div>
			</div>

			@* <div class="option">
				<label class="option_name">Max Players:</label>
				<div class="adjuster">
					<label class="option_adjust" onclick="@(() => ChangeValue("decrement", MaxPlayers, 1, 1))">&#60;</label>
					<label class="option_value">@MaxPlayers</label>
					<label class="option_adjust" onclick="@(() => ChangeValue("increment", MaxPlayers, 1, 1))">&#62;</label>
				</div>
			</div> *@

			<div class="option">
				<label class="option_name">#lobby.settings.rounds</label>
				<div class="adjuster">
					<label class="option_adjust" onclick="@(() => { var rounds = MaxRounds; ChangeValue("decrement", ref rounds, 1, 10); MaxRounds = rounds; })">-10</label>
					<label class="option_adjust" onclick="@(() => { var rounds = MaxRounds; ChangeValue("decrement", ref rounds, 1, 1); MaxRounds = rounds; })">-1</label>
					<label class="option_value">@MaxRounds</label>
					<label class="option_adjust" onclick="@(() => { var rounds = MaxRounds; ChangeValue("increment", ref rounds, 1, 1); MaxRounds = rounds; })">+1</label>
					<label class="option_adjust" onclick="@(() => { var rounds = MaxRounds; ChangeValue("increment", ref rounds, 1, 10); MaxRounds = rounds; })">+10</label>
				</div>
			</div>

			<div class="option">
				<label class="option_name">#lobby.settings.ballspeed</label>
				<div class="adjuster">
					<label class="option_adjust" onclick="@(() => { var speed = Speed; ChangeValue("decrement", ref speed, 100, 100); Speed = speed; })">-100</label>
					<label class="option_adjust" onclick="@(() => { var speed = Speed; ChangeValue("decrement", ref speed, 100, 10); Speed = speed; })">-10</label>
					<label class="option_value">@Speed</label>
					<label class="option_adjust" onclick="@(() => { var speed = Speed; ChangeValue("increment", ref speed, 100, 10); Speed = speed; })">+10</label>
					<label class="option_adjust" onclick="@(() => { var speed = Speed; ChangeValue("increment", ref speed, 100, 100); Speed = speed; })">+100</label>
				</div>
			</div>

			@* <div class="option">
				<label class="option_name">Paddle Size:</label>
				<div class="adjuster">
					<label class="option_adjust">&#60;</label>
					<label class="option_value"></label>
					<label class="option_adjust">&#62;</label>
				</div>
			</div> *@

			<div class="option">
				<label class="option_name">#lobby.settings.ballacceleration</label>
				<div class="adjuster">
					<label class="option_adjust" onclick=@( () => ChangeAcceleration() )>&#60;</label>
					@if (GameSettings.Acceleration)
					{
						<label class="option_value">#lobby.settings.ballacceleration.true</label>
					}
					else
					{
						<label class="option_value">#lobby.settings.ballacceleration.false</label>
					}
					<label class="option_adjust" onclick=@( () => ChangeAcceleration() )>&#62;</label>
				</div>
			</div>

			@if (Networking.IsHost)
			{
				<div class="button reset" onclick="@(() => OnReset())">#lobby.settings.reset</div>
			}
			else
			{
				<div class="button disabled">#lobby.settings.nothost</div>
			}

		</div>

	</div>

	<div class="footer">

		<div class="left">
			@if (Networking.IsHost)
			{
				<div class="button play" onclick="@(() => OnPlay())">#menu.play</div>
			}
			else
			{
				<div class="button disabled">#lobby.waitingforhost</div>
			}

			<div class="button color" onclick="@(() => TogglePalette())" style="color: @GameSettings.Color;">#lobby.changecolor</div>
		</div>

		<div class="button exit" onclick="@(() => OnLeaveLobby())">#lobby.leave</div>

	</div>

	<div class="panel_background @(paletteVisible ? "" : "hidden")">
		<div class="palette">
			<div class="colors">
				<div class="color blue" onclick="@(() => PickColor("blue"))"></div>
				<div class="color green" onclick="@(() => PickColor("green"))"></div>
				<div class="color darkcyan" onclick="@(() => PickColor("darkcyan"))"></div>
				<div class="color red" onclick="@(() => PickColor("red"))"></div>
				<div class="color purple" onclick="@(() => PickColor("purple"))"></div>
				<div class="color saddlebrown" onclick="@(() => PickColor("saddlebrown"))"></div>
				<div class="color gray" onclick="@(() => PickColor("gray"))"></div>
				<div class="color lightblue" onclick="@(() => PickColor("lightblue"))"></div>
				<div class="color lightgreen" onclick="@(() => PickColor("lightgreen"))"></div>
				<div class="color cyan" onclick="@(() => PickColor("cyan"))"></div>
				<div class="color lightcoral" onclick="@(() => PickColor("lightcoral"))"></div>
				<div class="color violet" onclick="@(() => PickColor("violet"))"></div>
				<div class="color yellow" onclick="@(() => PickColor("yellow"))"></div>
				<div class="color white" onclick="@(() => PickColor("white"))"></div>
			</div>

			<div class="button back" onclick="@(() => TogglePalette())">#menu.back</div>
		</div>
	</div>
</root>

@code
{
	@* [Sync] public int MaxPlayers { get; set; } *@
	[Sync] public LobbyPrivacy LobbyPrivacy { get; set; } = LobbyPrivacy.Public;
	[Sync] public int MaxRounds { get; set; }
	[Sync] public int Speed { get; set; }
	[Sync] public bool Acceleration { get; set; }
	bool paletteVisible = false;
	[Property, ImageAssetPath] string pingIcon {get; set;}

	public LobbyMenu()
	{

		@* MaxPlayers = GameSettings.MaxPlayers; *@
		MaxRounds = GameSettings.MaxRounds;
		Speed = GameSettings.Speed;
		Acceleration = GameSettings.Acceleration;
	}

	@* void SetToTeam(Connection player)
	{
		if (!Networking.IsHost) return;

		NetworkManager.player.Team = "Player";
	} *@

	void SetLobbyPrivacy(string direction)
	{
		if (LobbyPrivacy == LobbyPrivacy.Public)
		{
			if (direction == "left")
			{
				LobbyPrivacy = LobbyPrivacy.Private;
				GameSettings.LobbyPrivacy = LobbyPrivacy;
			}
			else if (direction == "right")
			{
				LobbyPrivacy = LobbyPrivacy.FriendsOnly;
				GameSettings.LobbyPrivacy = LobbyPrivacy;
			}
		}
		else if (LobbyPrivacy == LobbyPrivacy.Private)
		{
			if (direction == "left")
			{
				LobbyPrivacy = LobbyPrivacy.FriendsOnly;
				GameSettings.LobbyPrivacy = LobbyPrivacy;
			}
			else if (direction == "right")
			{
				LobbyPrivacy = LobbyPrivacy.Public;
				GameSettings.LobbyPrivacy = LobbyPrivacy;
			}
		}
		else if (LobbyPrivacy == LobbyPrivacy.FriendsOnly)
		{
			if (direction == "left")
			{
				LobbyPrivacy = LobbyPrivacy.Public;
				GameSettings.LobbyPrivacy = LobbyPrivacy;
			}
			else if (direction == "right")
			{
				LobbyPrivacy = LobbyPrivacy.Private;
				GameSettings.LobbyPrivacy = LobbyPrivacy;
			}
		}
	}

	void ChangeValue(string operation, ref int value, int min, int step)
	{
		if (!Networking.IsHost) return;

		if (operation == "increment")
		{
			value = Math.Max(min, value + step);
		}
		else if (operation == "decrement")
		{
			value = Math.Max(min, value - step);
		}
	}

	void ChangeAcceleration()
	{
		if (Acceleration)
		{
			Acceleration = false;
		}
		else
		{
			Acceleration = true;
		}
	}

	void TogglePalette()
	{
		if (paletteVisible)
			paletteVisible = false;
		else 
			paletteVisible = true;
	}

	void PickColor(string color)
	{
		GameSettings.Color = color;
		paletteVisible = false;
		Log.Info(GameSettings.Color);
	}

	void OnReset()
	{
		if (!Networking.IsHost) return;

		@* MaxPlayers = 4; *@
		LobbyPrivacy = LobbyPrivacy.Public;
		MaxRounds = 20;
		Speed = 400;
		Acceleration = true;
	}

	void OnPlay()
	{
		@* GameSettings.MaxPlayers = MaxPlayers; *@
		@* GameSettings.MaxRounds = MaxRounds;
		GameSettings.Speed = Speed;
		GameSettings.Acceleration = Acceleration; *@

		SceneLoadOptions load = new SceneLoadOptions();
		load.SetScene("scenes/game.scene");
		Game.ChangeScene(load);
	}

	void OnLeaveLobby()
	{
		Networking.Disconnect();
		Scene.LoadFromFile("scenes/MainMenu.scene");
	}

	protected override void OnUpdate()
	{
		GameSettings.LobbyPrivacy = LobbyPrivacy;
		GameSettings.MaxRounds = MaxRounds;
		GameSettings.Speed = Speed;
		GameSettings.Acceleration = Acceleration;
	}

	/// <summary>
	/// the hash determines if the system should be rebuilt. If it changes, it will be rebuilt
	/// </summary>

	protected override int BuildHash() => System.HashCode.Combine(
	@* MaxPlayers, *@
	LobbyPrivacy,
	NetworkManager.Instance.GameMode,
	MaxRounds,
	Speed,
	Acceleration,
	Connection.All.Count
	);
}