@page "/fetchdata"

@using Blazor3State.Data
@inject WeatherForecastService ForecastService

<h1>Showing states in blazor</h1>

<p>This component demonstrates fetching data from a service.</p>

<button class="btn btn-primary" @onclick="LoadImage">New Image</button>
<div class="image-container">
    @if (state == LoadingContainerState.Loading)
    {
        <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    }
    else if (state == LoadingContainerState.Loaded)
    {
        <img src="https://loremflickr.com/200/300" alt="Alternate text" />
    }
    else if (state == LoadingContainerState.Error)
    {
        <p><em>An error has occurred. Click new image to try again !</em></p>
    }
</div>

@code {
    Random random = new Random();
    public enum LoadingContainerState { Loading, Loaded, Error }
    LoadingContainerState state;

    protected override async Task OnInitializedAsync()
    {
        await LoadImage();
    }

    async Task LoadImage()
    {
        state = LoadingContainerState.Loading;
        await Task.Delay(1000);
        if (random.Next(3) == 2)
        {
            state = LoadingContainerState.Error;
        }
        else state = LoadingContainerState.Loaded;

    }
}