@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">
    <LoadingContainer State="@state">
        <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>
        </Loading>
        <Loaded>
            <img src="https://loremflickr.com/200/300" alt="Alternate text" />
        </Loaded>
        <ErrorContent>
            <p><em>An error has occurred. Click new image to try again !</em></p>
        </ErrorContent>
    </LoadingContainer>
</div>

@code {
    Random random = new Random();
    LoadingContainerState state;

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

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

    }
}