@page "/"
@using MyRecipes2.Shared;
@inject HttpClient Http;
@inject NavigationManager NavManager;

<h1>Home</h1>

@if (isAdvancedSearch)
{
    <div>
        <div class="form-group">
            <label>Name Contains</label>
            <input @bind="NameSearchTerm" type="text" class="form-control">
        </div>
        <div class="form-group">
            <label>Method Contains</label>
            <input @bind="MethodSearchTerm" type="text" class="form-control">
        </div>
        <div class="form-group">
            <label>Ingredients Contains</label>
            <input @bind="IngredientSearchTerm" type="text" class="form-control">
        </div>
        <div class="form-group">
            <label>Meal Type Equals</label>
            <select class="form-control" @bind="MealTypeSearchTerm">
                <option value=""></option>
                @foreach (var mealType in mealTypes)
                {
                    <option value="@mealType.Name">@mealType.Name</option>
                }
            </select>
        </div>

        <button @onclick="ClickAdvancedSearch" class="btn btn-primary" type="button">Search</button>

        <small @onclick="SwitchToBasicSearch" style="cursor: pointer;" class="text-muted btn btn-link">Basic Search</small>

        <div class="col-12 p-2">
        </div>
    </div>
}
else
{
    <div class="input-group col-md-4">
        <input @bind="PrimarySearchTerm" type="text" class="form-control border-end-0 border" placeholder="Find a Recipe">
        <span class="input-group-append">
            <button @onclick="ClickSearch" class="btn btn-outline-primary bg-light border-start-0 border ms-n5" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                </svg>
            </button>
        </span>
    </div>

    <small @onclick="SwitchToAdvancedSearch" style="cursor: pointer;" class="text-muted btn btn-link">Advanced Search</small>

    <div class="col-12 p-2">
    </div>
}


@if (showSearchResults)
{
    @if (recipes == null)
    {
        <div class="border-top col-12 p-3">
            <h4>Loading...</h4>
        </div>
    }
    else
    {
        <div class="border-top col-12 p-3">
            <h4>@recipes.Count() result(s) found</h4>
        </div>
    }
}
else
{

    <div class="border-top col-12 p-3">
        <h4>Checkout our hottest recipes</h4>
    </div>
}

@if (recipes == null)
{
    <div class="spinner-border m-5 text-primary" style="width: 80px; height: 80px;" role="status">
    </div>
}
else
{
    <div class="row">
        @foreach (var recipe in recipes)
        {
            <RecipeDisplayCard recipe="recipe"></RecipeDisplayCard>
        }
    </div>

    <div class="border-top col-12 p-3">
        <h4>Can't choose? Try out a random recipe! </h4>

        <button @onclick="ClickRandomRecipe" class="btn btn-primary" style="margin-right: 0.5rem" type="button">
            <i class="oi oi-random"></i>
        </button>
    </div>
}


@code{
private bool isAdvancedSearch { get; set; } = false;

    private bool showSearchResults;

    List<RecipeDto> recipes;

    private List<MealTypeDto> mealTypes { get; set; }

    static Random random = new Random();

    protected override async Task OnInitializedAsync()
    {
        showSearchResults = false;
        mealTypes = await Http.GetFromJsonAsync<List<MealTypeDto>>("/MealType/AllMealTypes");
        recipes = await Http.GetFromJsonAsync<List<RecipeDto>>("Recipe/home");
    }

    protected void ClickRandomRecipe()
    {
        int r = random.Next(recipes.Count);
        RecipeDto randomRecipe = recipes[r];
        NavManager.NavigateTo($"ViewRecipe/{randomRecipe.Id}");
    }

    protected void ClickView(RecipeDto recipe)
    {
        NavManager.NavigateTo($"ViewRecipe/{recipe.Id}");
    }

    private string PrimarySearchTerm { get; set; }

    private string NameSearchTerm { get; set; }

    private string MethodSearchTerm { get; set; }

    private string IngredientSearchTerm { get; set; }

    private string MealTypeSearchTerm { get; set; }

    protected void SwitchToAdvancedSearch()
    {
        isAdvancedSearch = true;
    }

    protected void SwitchToBasicSearch()
    {
        isAdvancedSearch = false;
    }

    protected async void ClickSearch()
    {
        recipes = null;
        showSearchResults = true;
        RecipeSearchRequestDto req = new RecipeSearchRequestDto();
        req.NameSearchString = PrimarySearchTerm;

        HttpResponseMessage message = await Http.PostAsJsonAsync<RecipeSearchRequestDto>("Recipe/search", req);
        recipes = await message.Content.ReadFromJsonAsync<List<RecipeDto>>();
        StateHasChanged();
    }

    protected async void ClickAdvancedSearch()
    {
        recipes = null;
        showSearchResults = true;
        RecipeSearchRequestDto req = new RecipeSearchRequestDto();
        req.NameSearchString = NameSearchTerm;
        req.MethodSearchString = MethodSearchTerm;
        req.IngredientSearchString = IngredientSearchTerm;
        req.MealTypeSearchString = MealTypeSearchTerm;

        HttpResponseMessage message = await Http.PostAsJsonAsync<RecipeSearchRequestDto>("Recipe/search", req);
        recipes = await message.Content.ReadFromJsonAsync<List<RecipeDto>>();
        StateHasChanged();
    }
}