@using Microsoft.AspNetCore.Components.Web

<div class="track-cover-container"
     @onmouseenter="HandleMouseEnter"
     @onmouseleave="HandleMouseLeave"
     style="position: relative; display: inline-block; cursor: pointer;">
    
    <MudImage Src="@FormatCoverUrl(CoverUrl)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
    
    @if (_isHovered || IsPlaying)
    {
        <div class="play-overlay"
             style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;">
            <MudIconButton Icon="@(IsPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
                           Color="Color.Inherit"
                           Size="Size.Large"
                           OnClick="OnPlayClick" />
        </div>
    }
</div>

@code {
    [Parameter] public string CoverUrl { get; set; } = string.Empty;
    [Parameter] public string TrackId { get; set; } = string.Empty;
    [Parameter] public bool IsPlaying { get; set; } = false;
    [Parameter] public EventCallback<string> OnPlay { get; set; }
    [Parameter] public int Height { get; set; } = 50;
    [Parameter] public int Width { get; set; } = 50;

    private bool _isHovered;

    private void HandleMouseEnter() => _isHovered = true;
    private void HandleMouseLeave() => _isHovered = false;

    private async Task OnPlayClick()
    {
        await OnPlay.InvokeAsync(TrackId);
    }
    
    private string FormatCoverUrl(string? url)
    {
        if (string.IsNullOrEmpty(url)) return "";
        return "https://" + url.Replace("%%", $"{Width}x{Height}");
    }
}