@page "/search/{Query?}"
@using Microsoft.Extensions.Configuration
@using MultiShop.Shared
@inject HttpClient Http
@inject IConfiguration Configuration
@inject IJSRuntime js

<div class="my-2">
    <div class="input-group my-2">
        <input type="text" class="form-control" placeholder="What are you looking for?" aria-label="What are you looking for?" id="search-input" @bind="Query" @onkeyup="@(async (a) => {if (a.Code == "Enter" || a.Code == "NumpadEnter") await PerformSearch(Query);})" disabled="@searching">
        <div class="input-group-append">
            <button class=@ToggleSearchConfigButtonCss type="button" @onclick="@(() => showSearchConfiguration = !showSearchConfiguration)" title="Configure"><span class="oi oi-cog align-text-top"></span></button>
            <button class="btn btn-outline-primary" type="button" @onclick="@(async () => await PerformSearch(Query))" disabled="@searching">Search</button>
        </div>
    </div>
    @if (showSearchConfiguration)
    {
        <div class="mb-2 mt-4 py-2">
            <h4>Configuration</h4>
            <div class="d-flex flex-wrap justify-content-start">
                <div class="card m-2" style="width: 24em;">
                    <div class="card-body">
                        <h5>Shop Quantity</h5>
                        <h6 class="card-subtitle mb-2 text-muted">How many results from each store?</h6>
                        <p class="card-text">This is the maximum number of results we gather for each store we have access to. The larger the result, the longer it takes to load search queries.</p>
                        <div class="form-group">
                            <label for="quantitySlider">Quantity: @activeProfile.maxResults</label>
                            <input class="form-control-range" type="range" id="quantitySlider" min="1" max="200" step="1" @bind="activeProfile.maxResults" @bind:event="oninput">
                        </div>
                    </div>
                </div>
                <div class="card m-2" style="width: 18em;">
                    <div class="card-body">
                        <h5 class="card-title">Currency</h5>
                        <h6 class="card-subtitle mb-2 text-muted">What currency would you like results in?</h6>
                        <p class="card-text">The currency displayed may either be from the online store directly, or through currency conversion (we'll put a little tag beside the coonverted ones).</p>
                        <div class="input-group my-3">
                            <div class="input-group-prepend">
                                <label class="input-group-text" for="currency-select">Currency</label>
                            </div>
                            <select class="form-control custom-select" id="currency-select" @bind="activeProfile.currency">
                                @foreach (Currency currency in Enum.GetValues<Currency>())
                                {
                                    @if (currency == activeProfile.currency)
                                    {
                                        <option selected>@currency</option>
                                    }
                                    else
                                    {
                                        <option value="@currency">@currency</option>
                                    }
                                }
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card m-2" style="width: 23em;">
                    <div class="card-body">
                        <h5>Minimum Rating</h5>
                        <h6 class="card-subtitle mb-2 text-muted">We'll crop out the lower rated stuff.</h6>
                        <p class="card-text">We'll only show products that have a rating greater than or equal to the set minimum rating. Optionally, we can also show those that don't have rating.</p>
                        <div class="form-group">
                            <label for="ratingSlider">Minimum rating: @(string.Format("{0:P0}", activeProfile.minRating))</label>
                            <input class="form-control-range" type="range" id="ratingSlider" min="0" max="1" step="0.01" @bind="activeProfile.minRating" @bind:event="oninput">
                        </div>
                        <div class="form-group form-check">
                            <input class="form-check-input" type="checkbox" id="keepUnratedCheckbox" @bind="activeProfile.keepUnrated">
                            <label class="form-check-label" for="keepUnratedCheckbox">Keep unrated results</label>
                        </div>
                    </div>
                </div>
                <div class="card m-2" style="width: 25em;">
                    <div class="card-body">
                        <h5>Price Range</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Whats your budget?</h6>
                        <p class="card-text">Results will be pruned of budgets that fall outside of the designated range. The checkbox can enable or disable the upper bound. These bounds do include the shipping price if it's known.</p>
                        <div class="input-group my-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <input type="checkbox" @bind="activeProfile.enableUpperPrice">
                                </div>
                                <span class="input-group-text">Upper limit</span>
                            </div>
                            <input type="number" class="form-control" @bind="activeProfile.UpperPrice" disabled="@(!activeProfile.enableUpperPrice)">
                            <div class="input-group-append">
                                <span class="input-group-text">.00</span>
                            </div>
                        </div>
                        <div class="input-group my-2">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Lower limit</span>
                            </div>
                            <input type="number" class="form-control" @bind="activeProfile.lowerPrice">
                            <div class="input-group-prepend">
                                <span class="input-group-text">.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card m-2" style="width: 22em;">
                    <div class="card-body">
                        <h5>Shops Searched</h5>
                        <h6 class="card-subtitle mb-2 text-muted">What's your preference?</h6>
                        <p class="card-text">We'll only look through shops that are enabled in this list. Of course, at least one shop has to be enabled.</p>
                        @foreach (string shop in Shops.Keys)
                        {
                            <div class="form-group form-check my-2">
                                <input class="form-check-input" type="checkbox" id=@(shop + "Checkbox") @bind="activeProfile.shopStates[shop]" disabled="@(!activeProfile.shopStates.IsToggleable(shop))">
                                <label class="form-check-label" for=@(shop + "Checkbox")>@shop enabled</label>
                            </div>
                        }
                    </div>
                </div>
                <div class="card m-2" style="width: 20em;">
                    <div class="card-body">
                        <h5>Minimum Purchases</h5>
                        <h6 class="card-subtitle mb-2 text-muted">If they're purchasing, I am too!</h6>
                        <p class="card-text">Only products that have enough purchases are shown. Optionally, we can also show results that don't have a purchase tally.</p>
                        <div class="input-group my-2">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Minimum purchases</span>
                            </div>
                            <input type="number" class="form-control" min="0" step="1" @bind="activeProfile.minPurchases">
                        </div>
                        <div class="form-group form-check my-2">
                            <input class="form-check-input" type="checkbox" id="keepNullPurchasesCheckbox" @bind="activeProfile.keepUnknownPurchaseCount">
                            <label class="form-check-label" for="keepNullPurchasesCheckbox">Keep unknown listings</label>
                        </div>
                    </div>
                </div>
                <div class="card m-2" style="width: 20em;">
                    <div class="card-body">
                        <h5>Minimum Reviews</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Well if this many people say it's good...</h6>
                        <p class="card-text">Only products with enough reviews/ratings are shown. Optionally, we can also show the results that don't have this information.</p>
                        <div class="input-group my-2">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Minimum reviews</span>
                            </div>
                            <input type="number" class="form-control" min="0" step="1" @bind="activeProfile.minReviews">
                        </div>
                        <div class="form-group form-check my-2">
                            <input class="form-check-input" type="checkbox" id="keepNullRatingsCheckbox" @bind="activeProfile.keepUnknownRatingCount">
                            <label class="form-check-label" for="keepNullRatingsCheckbox">Keep unknown listings</label>
                        </div>
                    </div>
                </div>
                <div class="card m-2" style="width: 22rem;">
                    <div class="card-body">
                        <h5>Shipping</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Free shipping?</h6>
                        <p class="card-text">Show results with shipping rates less than a certain value, and choose whether or not to display listings without shipping information.</p>
                        <div class="input-group my-2">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <input type="checkbox" @bind="activeProfile.enableMaxShippingFee">
                                </span>
                                <span class="input-group-text">Max shipping</span>
                            </div>
                            <input type="number" class="form-control" min="0" step="1" @bind="activeProfile.MaxShippingFee" disabled="@(!activeProfile.enableMaxShippingFee)">
                            <div class="input-group-append">
                                <span class="input-group-text">.00</span>
                            </div>
                        </div>
                        <div class="form-group form-check my-2">
                            <input class="form-check-input" type="checkbox" id="keepNullShipping" @bind="activeProfile.keepUnknownShipping">
                            <label class="form-check-label" for="keepNullShipping">Keep unknown listings</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

<div class="my-3 py-2">
    <div class="d-inline-flex" style="width: 100%; border-bottom-style: solid; border-bottom-width: 1px; border-color: lightgray;">
        <button type="button" class=@ToggleResultsConfigurationcss @onclick="@(() => showResultsConfiguration = !showResultsConfiguration)"><span class="oi oi-sort-descending"></span></button>
    </div>
    @if (showResultsConfiguration)
    {
        <div style="border-color: lightgray;" class="p-1">
            <div class="card m-2" style="max-width: 23em;">
                <div class="card-body">
                    <h5 class="card-title">Results Order</h5>
                    <h6 class="card-subtitle mb-2 text-muted">What's important to you?</h6>
                    <p class="card-text">The results will be sorted by the top category. If the compared results are equal or don't have a value for that category, the next category on the list will be used and so on.</p>
                    <DragAndDropList Items="@(activeResultsProfile.Order)" Context="item" AdditionalListClasses="mx-auto" OnOrderChange="@(async () => await Organize(activeResultsProfile.Order))">
                        <DraggableItem>
                            @(item.FriendlyName())
                        </DraggableItem>
                    </DragAndDropList>
                </div>
            </div>
        </div>        
    }

    <div class="d-flex flex-wrap" style="width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: lightgray;">
        <div class="align-self-end">
            @if (searching)
            {
                @if (listings.Count != 0)
                {
                    <div class="spinner-border spinner-border-sm text-secondary my-auto mr-1" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <span class="text-muted mx-1">Looked through @resultsChecked listings and found @listings.Count viable results. We're still looking!</span>
                }
                else
                {
                    <div class="spinner-border spinner-border-sm text-primary my-auto mr-1" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <span class="text-muted">Hold tight! We're looking through the stores for viable results...</span>
                }
            }
            else if (listings.Count != 0)
            {
                @if (organizing)
                {
                    <div class="spinner-border spinner-border-sm text-success my-auto mr-1" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <span class="text-muted">Organizing the data to your spec...</span>
                }
                else
                {
                    <span class="text-muted">Looked through @resultsChecked listings and found @listings.Count viable results.</span>
                }
            }
            else if (searched)
            {
                <span class="text-muted">We've found @resultsChecked listings and unfortunately none matched your search.</span>
            }
            else
            {
                <span class="text-muted">Search for something to see the results!</span>
            }
        </div>
    </div>
    <div>
        @if (listings.Count > 0)
        {
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Price</th>
                            <th scope="col">Shipping</th>
                            <th scope="col">Purchases</th>
                            <th scope="col">Rating</th>
                            <th scope="col">Reviews</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    @if (!showSearchConfiguration && !searching) {
                        <tbody>
                            <Virtualize Items="@listings" Context="product">
                                <tr>
                                    <th scope="row" @key="product.Listing">
                                        <div class="text-truncate">@product.Listing.Name</div>
                                        <small>From @product.ShopName</small>
                                        @if (product.Listing.ConvertedPrices)
                                        {
                                            <span class="ml-3 mr-1 badge badge-warning">Converted price</span>
                                        }
                                        @foreach (ResultsProfile.Category c in product.Tops)
                                        {
                                            <span class="mx-1 badge badge-primary">@CategoryTags(c)</span>
                                        }
                                    </th>
                                    <td>
                                        @if (product.Listing.UpperPrice != product.Listing.LowerPrice)
                                        {
                                            <div class="text-truncate">
                                                @product.Listing.LowerPrice to @product.Listing.UpperPrice
                                            </div>
                                        }
                                        else
                                        {
                                            <div class="text-truncate">
                                                @GetOrNA(product.Listing.LowerPrice)
                                            </div>
                                        }
                                    </td>
                                    <td>
                                        <div class="text-truncate">
                                            @GetOrNA(product.Listing.Shipping)
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-truncate">
                                            @GetOrNA(product.Listing.PurchaseCount)
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-truncate">
                                            @(product.Listing.Rating != null ? string.Format("{0:P2}", product.Listing.Rating) : "N/A")
                                        </div>
                                    </td>
                                    <td>@GetOrNA(product.Listing.ReviewCount)</td>
                                    <td>
                                        <a href="@product.Listing.URL" class="btn btn-primary" target="_blank">View</a>
                                    </td>
                                </tr>
                            </Virtualize>
                        </tbody>
                    }
                </table>
            </div>
        }
    </div>
</div>