@page "/"
@inject NavigationManager navigator
@inject HttpClient httpClient
@inject Blazored.LocalStorage.ILocalStorageService localStorage

<PageTitle>Index</PageTitle>

<MudContainer Class="align-center justify-center d-flex">
    <MudContainer Style="width: 400px">
        <MudSelect Class="pt-12" @bind-Value=selectedChunk TextChanged="SelectedChunk" select T=int Label="Chunk" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
            @for (int i = 0; i < numOfChunks; i++)
            {
                <MudSelectItem T="int" Value="@i" />
            }
        </MudSelect>
        <MudContainer Class="justify-center d-flex pb-16 pt-4">
            <MudButton Variant="Variant.Filled" OnClick=StartLearning Color="Color.Primary">Start learning!</MudButton>
        </MudContainer>


        <MudContainer Class="justify-center d-flex">
            @if (Charecters != null)
            {
                <MudPaper Class="overflow-scroll rounded-0" Style="height: 60vh;" Elevation="1">
                    <MudDataGrid FixedHeader=true Items="@Charecters">
                        <Columns>
                            <PropertyColumn Property="x => x.charcter" Title="CChar" />
                            <PropertyColumn Property="x => x.pinyin" Title="Pinyin" />
                        </Columns>
                    </MudDataGrid>
                </MudPaper>
            }
        </MudContainer>
    </MudContainer>
</MudContainer>

@code{
    int numOfChunks = 100; //Exclusive index 0
    int selectedChunk = 0;

    protected override void OnInitialized()
    {
        SelectedChunk();
        StateHasChanged();
    }

    async void StartLearning()
    {
        await localStorage.SetItemAsync("SelectedChunk", selectedChunk);
        navigator.NavigateTo("/Learn");
    }

    CChar[]? Charecters;
    async void SelectedChunk()
    {
        Charecters = await httpClient.GetFromJsonAsync<CChar[]>($"Data/Normalized_chunk_{selectedChunk.ToString("000")}.json");
        StateHasChanged();
    }
}