@using Sandbox.UI
@inherits Panel

<style>
    ShipEntries {
        .classgroup {
            flex-direction: column;
            align-items: center;
            gap: 12px;

            .classname {
                font-family: "Wallpoet";
                font-size: 28px;
                color: rgba(255,255,255,0.5);
                text-align: center;
            }

            .entries {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 12px;

                .entry {
                    width: 116px;
                    height: 116px;
                    background-color: rgba(78, 75, 66, 0.5);
                    border: 2px solid rgba(0,0,0,0.3);
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    padding: 6px;

                    .logo {
                        width: 100%;
                        height: 100%;
                        pointer-events: none;
                    }

                    .nologo {
                        font-family: "AzeretMono-Medium";
                        font-size: 16px;
                        color: rgba(255,255,255,0.5);
                        text-align: center;
                    }

                    &:hover {
                        border-color: cyan;
                        background-color: rgba(0,100,120,0.5);
                        transform: scale(1.1);
                    }

                    &.selected {
                        border-color: cyan;
                        background-color: rgba(0,80,100,0.6);
                    }
                }
            }
        }
    }
</style>

<root>
    @foreach ( var shipType in Ships.Keys )
    {
        <div class="classgroup">
            <label class="classname">@shipType.ToString().ToLower()</label>
            <div class="entries">
                @foreach ( var ship in Ships[shipType] )
                {
                    var s = ship;
                    var isSelected = CurrentShip == ship;
                    <div class="entry @(isSelected ? "selected" : "")"
                         onmouseover="@(() => OnHovered?.Invoke(s))"
                         onmousedown="@(() => OnSelected?.Invoke(s))">
                        @if ( !string.IsNullOrEmpty( ship.ShipLogo ) )
                        {
                            <img class="logo" src="@ship.ShipLogo" />
                        }
                        else
                        {
                            <label class="nologo">@ship.ShipName</label>
                        }
                    </div>
                }
            </div>
        </div>
    }
</root>

@code
{
    [Parameter] public Dictionary<ShipData.ShipType, List<ShipData>> Ships { get; set; } = new();
    [Parameter] public ShipData CurrentShip { get; set; }
    [Parameter] public Action<ShipData> OnSelected { get; set; }
    [Parameter] public Action<ShipData> OnHovered { get; set; }

    protected override int BuildHash() => HashCode.Combine( CurrentShip );
}