@using Sandbox
@using Sandbox.UI

@namespace PanelRenderTarget
@inherits ScreenPanel

<div class="screen">
	<div class="title">Example</div>

	<div class="debug" @onclick=@Click @onmouseover=@OnDebugMouseOver @onmouseout=@OnDebugMouseOut>
		<div class="test-hover">Hover: @IsHovering</div>
		<div>Pressed: @IsPressed</div>
		<div>Clicks: @ClickCount</div>
		<div>Mouse: @MousePosition</div>

		<TextEntry @onclick=@TestClick Value:Bind=@test placeholder="Quantitée" />
	</div>

	

	<div class="cursor" style="left:@CursorLeft; top:@CursorTop;"></div>
	
</div>

@code
{
	public Vector2 MousePosition { get; private set; }
	public bool IsHovering { get; private set; }
	public bool IsPressed { get; private set; }
	public int ClickCount { get; private set; }

	private string CursorLeft => $"{MousePosition.x}px";
	private string CursorTop => $"{MousePosition.y}px";

	public string test { get; set; } = "teste";

	protected override void OnMouseMove(MousePanelEvent e)
	{
		base.OnMouseMove(e);
		var root = FindRootPanel() as TargetRootPanel;
		//MousePosition = root.MousePosition;
	}

	public void OnDebugMouseOver(PanelEvent e)
	{
		IsHovering = true;
	}

	public void OnDebugMouseOut(PanelEvent e)
	{
		IsHovering = false;
	}

	public void TestClick(PanelEvent e)
	{
		Log.Info("Clicked on text entry");
	}

	protected override void OnMouseDown(MousePanelEvent e)
	{
		base.OnMouseDown(e);
		IsPressed = true;
	}

	protected override void OnMouseUp(MousePanelEvent e)
	{
		base.OnMouseUp(e);
		IsPressed = false;
	}

	public void Click(PanelEvent e)
	{
		ClickCount++;
	}

	protected override int BuildHash()
	{
		StateHasChanged();
		var hash = 17;
		hash = hash * 31 + MousePosition.x.GetHashCode();
		hash = hash * 31 + MousePosition.y.GetHashCode();
		hash = hash * 31 + IsHovering.GetHashCode();
		hash = hash * 31 + IsPressed.GetHashCode();
		hash = hash * 31 + ClickCount.GetHashCode();
		return hash;
	}
}

<style>
	.screen {
		cursor: crosshair;
		pointer-events: auto;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #06111f;
		color: white;
		font-size: 32px;
		font-weight: bold;
	}

	.title {
		position: absolute;
		left: 40px;
		top: 40px;
		color: white;
		font-size: 64px;
	}

	.debug {
		position: absolute;
		left: 40px;
		top: 140px;
		font-size: 28px;
		color: #9fd4ff;
		flex-direction: column;
		width:400px;
	}

		.debug:hover {
			background-color: aqua;
		}

		.debug:active {
			background-color: red;
		}

	.cursor {
		position: absolute;
		width: 24px;
		height: 24px;
		background-color: red;
		border-radius: 50%;
		transform: translate(-50% -50%);
	}

	TextEntry {
		background-color:green;
	}

	TextEntry:focus {
		border-color: red;
	}
</style>