@using Sandbox
@using Sandbox.UI
@inherits Panel
@namespace BlockParty
@attribute [StyleSheet( "SteamAvatar.razor.scss" )]

@* A player's Steam avatar that opens their Steam profile (or a given Url) in a web browser when clicked. Same trick
   as WorkshopLinkButton: the engine only opens web links from a rich label's <a href>, so an
   INVISIBLE anchor glyph (transparent, Size px = the whole face) sits over the avatar image and is
   the click target. Width/height come from Size so the glyph and face always agree; margins, borders
   and flex placement are the host's. Clicks are stopped so a host row/screen onclick doesn't also
   fire. *@
<root style="@RootStyle" onclick=@((PanelEvent e) => e.StopPropagation()) onmouseover=@((PanelEvent e) => OnHover?.Invoke( e ))>
	<WebLinkLabel IsRich=@true Text=@AnchorHtml style="@GlyphStyle"></WebLinkLabel>
</root>

@code
{
	[Parameter] public long SteamId { get; set; }

	/// <summary>Face size in px (square).</summary>
	[Parameter] public int Size { get; set; } = 50;

	/// <summary>Hover hook for the host's tooltip layer (its Tip(...) handler).</summary>
	[Parameter] public Action<PanelEvent> OnHover { get; set; }

	/// <summary>Where the click goes. Null = the player's Steam profile.</summary>
	[Parameter] public string Url { get; set; }

	public static string ProfileUrl( long steamId ) => $"https://steamcommunity.com/profiles/{steamId}";

	private string RootStyle => $"width:{Size}px;height:{Size}px;background-image:url( avatar:{SteamId} );";

	// A Material Icons glyph is 1em square, so at Size px it covers the whole face; drawn transparent.
	private string GlyphStyle => $"font-size:{Size}px;line-height:{Size}px;";
	private string AnchorHtml => $"<a href=\"{Url ?? ProfileUrl( SteamId )}\">person</a>";

	protected override int BuildHash() => System.HashCode.Combine( SteamId, Size, Url );
}