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

<root class="@(Visible ? "visible" : "")">
	@if ( Visible )
	{
		@if ( Usable.CanUse )
		{
			<span>@((Usable.InteractionDuration == 0f || Usable.Locked) ? "Press" : "Hold")</span>
			<span class="key">[E]</span>
			<span>to @(Usable.Locked ? Usable.LockText : Usable.UseString).</span>
		}
		else
		{
			<span>@Usable.UseString</span>
		}
	}
</root>

@code {
	private LegacyUsableComponent Usable => Player.Local?.HoveredUsable;
	private bool Visible => Usable.IsValid();

	protected override int BuildHash() => HashCode.Combine( Usable, Usable?.CanUse ?? false, Usable?.UseString );
}

<style>
	InteractionTip {
		position: absolute;
		bottom: 25%;
		flex-direction: row;
		color: white;
		font-size: 28px;
		text-shadow: 4px 4px 0px black;
		padding: 8px 30px;
		opacity: 0;

		&.visible {
			opacity: 1;
			background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.2) 80%, rgba(0,0,0,0) 100%);
		}

		.key {
			color: rgba(255, 220, 80, 1);
			margin: 0 8px;
		}
	}
</style>