@using Sandbox.UI
@inherits Panel

<style>
    FlightControlsHint {
        position: absolute;
        right: 72px;
        top: 72%;
        transform: translateY(-50%);
        flex-direction: column;
        gap: 6px;
        padding: 12px 14px;
        background-color: rgba(0, 0, 0, 0.34);
        border-left: 2px solid rgba(120, 220, 255, 0.4);
        border-right: 2px solid rgba(120, 220, 255, 0.4);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;

        .title {
            font-family: "Wallpoet";
            font-size: 22px;
            color: rgba(160, 240, 255, 0.95);
            margin-bottom: 4px;
        }

        .row {
            flex-direction: row;
            justify-content: space-between;
            gap: 16px;

            .label {
                font-family: "AzeretMono-Medium";
                font-size: 18px;
                color: rgba(230, 250, 255, 0.9);
            }
            
            img{
                width: 52px;
                aspect-ratio: 1;
            }

            .key {
                min-width: 52px;
                justify-content: center;
                align-items: center;
                padding: 2px 8px;
                background-color: rgba(0, 0, 0, 0.5);
                border-left: 1px solid rgba(120, 220, 255, 0.35);
                border-right: 1px solid rgba(120, 220, 255, 0.35);
                color: rgba(115, 220, 255, 1);
            }
        }

        &.open {
            opacity: 1;
        }
    }
</style>

<root class="@(_open ? "open" : "")">
    <label class="title">FLIGHT CONTROLS</label>
    @if ( !Input.UsingController )
    {
        <div class="row"><label class="label">Look</label><img src="ui/glyphs/default/mouse.svg" class="key" /></div>
        <div class="row"><label class="label">Move</label><img src="ui/glyphs/default/move.svg" class="key" /></div>
    }
    else
    {
        <div class="row"><label class="label">Move</label><img src="ui/glyphs/xbox/leftjoystickbutton.svg" class="key" /></div>
        <div class="row"><label class="label">Look</label><img src="ui/glyphs/xbox/rightjoystickbutton.svg" class="key" /></div>
    }
    <div class="row"><label class="label">Attack</label><InputHint Action="attack1" class="key" /></div>
    @if ( !Input.UsingController )
    {
        <div class="row"><label class="label">Boost</label><img src="ui/glyphs/default/shift.svg" class="key" /></div>
        <div class="row"><label class="label">Brake</label><InputHint Action="back" class="key" /></div>

    }
    else
    {
        <div class="row"><label class="label">Boost</label><InputHint Action="Run" class="key" /></div>
        <div class="row"><label class="label">Brake</label><img src="ui/glyphs/xbox/rightsticky.svg" class="key" /></div>
    }
    <div class="row"><label class="label">Swap Ship</label><InputHint Action="menu" class="key" /></div>
</root>

@code
{
    private bool _open;
    private bool _shownOnce;
    private TimeUntil _hideAt;

    public override void Tick()
    {
        base.Tick();

        var pawn = LocalPlayer.Pawn;
        if ( pawn == null || !pawn.IsValid() ) return;

        if ( !_shownOnce && pawn.IsAlive )
        {
            _shownOnce = true;
            _open = true;
            _hideAt = 50f;
        }

        if ( _open && _hideAt )
            _open = false;
    }

    protected override int BuildHash() => HashCode.Combine(_open, Input.UsingController );
}