@page "/fetchdata"
@using BlazorWebapplication.Shared
@inject HttpClient Http
@inject IJSRuntime JsRuntime
<h1>Weather forecast</h1>
<div class="container">
    <div class="row">
        <div class="form-group col-md-4">
            <label asp-for="ForeastDate" class="control-label">Date</label>
            <input @bind="ForeastDate" class="form-control" type="date" />
        </div>
        <div class="form-group col-md-4">
            <label asp-for="ForeastDate" class="control-label">TemperatureC</label>
            <input @bind="TemperatureC" class="form-control" />
        </div>
        <div class="form-group  col-md-4">
            <label asp-for="Summary" class="control-label">Summary</label>
            <select class="form-control" @bind="Summary">
                @foreach (var item in Summaries)
                {
                    <option value="@item">@item</option>
                }
            </select>
        </div>
    </div>
    <div class="row">
        @if (IsEditMode)
        {
            <button class="btn btn-primary" @onclick="SaveEditItem">Save</button>
        }
        else
        {
            <button class="btn btn-primary" @onclick="AddNewItem">Add New Item</button>
        }
        <button class="btn btn-primary" @onclick="ShowPrompt">Show Prompt</button>
    </div>
</div>
@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                    <td><button class="btn btn-primary" @onclick='()=>EditItem(forecast.Id)'>Edit </button></td>
                </tr>
            }
        </tbody>
    </table>
} 
@code {
    private WeatherForecast[] forecasts; //data list
    private bool IsEditMode;             //Specify the form mode
    //define the following properties to add or edit item.
    private DateTime ForeastDate;
    private string TemperatureC;
    private string[] Summaries;
    private string Summary;

    private int selectedid; //used to store the Edit item primary key.

    //Set the initial data.
    protected override async Task OnInitializedAsync()
    {
        IsEditMode = false; // set the default mode to Add Mode.
        Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };
        ForeastDate = DateTime.Now;
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("http://localhost:5000/WeatherForecast");
    }

    //add new items to the data list
    private void AddNewItem()
    {
        var rng = new Random();
        //add new item in to the data list, you can also call the api to insert the data into database.
        forecasts = forecasts.Append(new WeatherForecast() { Id = forecasts.Length, Date = ForeastDate, Summary = Summary, TemperatureC = Convert.ToInt32(TemperatureC) }).ToArray();
    }
    //save the Edit item.
    private void SaveEditItem()
    {
        //find the item based on the primary key.
        var selectedItem = forecasts.First(c => c.Id == selectedid);

        //update the data.
        selectedItem.Date = ForeastDate;
        selectedItem.Summary = Summary;
        selectedItem.TemperatureC = Convert.ToInt32(TemperatureC);

        //change the mode from Edit to Add mode.
        IsEditMode = false;

        //clear the input value.
        ForeastDate = DateTime.Now;
        Summary = "";
        TemperatureC = "";

    }
    //Edit Item.
    private void EditItem(int id)
    {
        IsEditMode = true; //change the Mode from Add to Edit.
                            //based on the primary key to find the item.
        selectedid = id;
        var selectedItem = forecasts.First(c => c.Id == id);

        //display the item's detailed information
        Summary = selectedItem.Summary;
        TemperatureC = selectedItem.TemperatureC.ToString();
        ForeastDate = selectedItem.Date;
    }

    private async Task ShowPrompt()
    {
        bool confirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Are you sure?");
        if (confirmed)
        {
            // Delete!
        }
    }
}