@implements IDisposable
@inject NavigationManager NavManager

<TelerikTabStrip ActiveTabId="@ActiveTabId"
                 ActiveTabIdChanged="@TabStripActiveTabIdChanged">
    @for (int i = 1; i <= TabCount; i++)
    {
        int tabIndex = i;

        <TabStripTab @key="@tabIndex" Title="@($"Tab {tabIndex}")" Id="@($"tab{tabIndex}")">
            <h2>Tab @tabIndex</h2>
        </TabStripTab>
    }
</TelerikTabStrip>

@code {
    private string ActiveTabId { get; set; } = "tab1";

    private bool IsNavigating { get; set; }

    private const int TabCount = 3;
    

    private async Task TabStripActiveTabIdChanged(string newActiveTabId)
    {
        if (IsNavigating)
        {
            return;
        }

        ActiveTabId = newActiveTabId;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            locationChangingRegistration = NavManager.RegisterLocationChangingHandler(OnLocationChanging);
        }
    }

    private IDisposable? locationChangingRegistration;

    private ValueTask OnLocationChanging(LocationChangingContext context)
    {
        IsNavigating = true;

        return ValueTask.CompletedTask;
    }

    public void Dispose() => locationChangingRegistration?.Dispose();
}