@using System
@using Sandbox
@using Sandbox.UI
@namespace BrickJam.UI
@inherits Panel

<root class="@(Stunned ? "visible" : "")">
	<div class="radial" style="background: conic-gradient(white 0%, white @WhitePercent, transparent @TransparentPercent)"></div>
	<span>STUNNED!</span>
</root>

@code {
	private bool Stunned => Player.Local?.IsStunned ?? false;

	private float Progress
	{
		get
		{
			var player = Player.Local;
			if ( player is null || player.StunDuration <= 0f )
				return 0f;

			return ((float)player.StunLeft / player.StunDuration).Clamp( 0f, 1f );
		}
	}

	private string WhitePercent => $"{Progress * 100f}%";
	private string TransparentPercent => $"{Progress * 100f + 0.01f}%";

	protected override int BuildHash() => HashCode.Combine( Stunned, Progress );
}

<style>
	StunIndicator {
		position: absolute;
		right: 0; top: 50%;
		padding: 10px 10px 10px 30px;
		transform: translateX(100%);
		transition: transform 0.1s ease-in-out;
		font-size: 32px;
		color: white;
		text-shadow: 3px 3px 0px black;
		align-items: center;
		background: linear-gradient(to left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);

		&.visible { transform: translateX(0%); }

		.radial {
			width: 48px;
			height: 48px;
			aspect-ratio: 1;
			border-radius: 50%;
			margin-right: 10px;
			filter: drop-shadow(3px 3px 1px black);
		}
	}
</style>