@using SteUp.Shared.Components.Layout
@using SteUp.Shared.Components.SingleElements.Card
@using SteUp.Shared.Core.Dto

@*
    Scelta del punto vendita: schermata intera, non un riquadro. L'elenco e'
    lungo e si scorre in piedi: serve tutto lo spazio e un campo di ricerca
    grande quanto il pollice.
*@

<MudDialog>
    <DialogContent>
        <div class="app-shell">
            <HeaderLayout Title="Punto vendita" Subtitle="@Conteggio" Cancel="true"
                          OnCancel="@Cancel" Compact="true"/>

            <div class="page-width" style="padding-bottom: var(--space-sm);">
                <div class="search-field">
                    <i class="search-field__icon ri-search-line" aria-hidden="true"></i>
                    <input type="search" placeholder="Cerca per codice, nome o città"
                           autocapitalize="none" autocorrect="off"
                           aria-label="Cerca un punto vendita"
                           value="@FilterText" @oninput="OnFilterInput"/>
                    @if (!FilterText.IsNullOrEmpty())
                    {
                        <MudIconButton Icon="@Icons.Material.Rounded.Close" Size="Size.Small"
                                       aria-label="Cancella la ricerca" OnClick="@ClearFilter"/>
                    }
                </div>
            </div>

            <div class="app-scroll">
                <div class="page-width page-body--flush">
                    @if (FilteredList is null)
                    {
                        <div class="card-list" aria-hidden="true">
                            @for (var i = 0; i < 4; i++)
                            {
                                <div class="list-card">
                                    <div class="skeleton skeleton--line-short"></div>
                                    <div class="skeleton skeleton--title" style="margin-top: 10px;"></div>
                                </div>
                            }
                        </div>
                    }
                    else if (FilteredList.Count == 0)
                    {
                        <div class="empty-state">
                            <i class="empty-state__icon ri-search-line" aria-hidden="true"></i>
                            <p class="empty-state__title">Nessun punto vendita</p>
                            <p class="empty-state__text">Nessun risultato per "@FilterText".</p>
                            <div class="empty-state__action">
                                <MudButton Variant="Variant.Outlined" OnClick="@ClearFilter">
                                    Azzera la ricerca
                                </MudButton>
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="card-list">
                            <Virtualize Items="FilteredList" Context="puntoVendita" OverscanCount="6">
                                <ShopCard PuntoVendita="puntoVendita" OnStarting="@(() => _busy = true)"/>
                            </Virtualize>
                        </div>
                    }
                </div>
            </div>
        </div>
    </DialogContent>
</MudDialog>

<SpinnerOverlay VisibleOverlay="_busy" Message="Apertura ispezione…"/>

@code {
    [CascadingParameter] private IMudDialogInstance MudDialog { get; set; } = null!;

    private List<PuntoVenditaDto>? FilteredList { get; set; }
    private string? FilterText { get; set; }
    private bool _busy;

    private string? Conteggio => FilteredList is null
        ? null
        : FilteredList.Count == 1 ? "1 punto vendita" : $"{FilteredList.Count} punti vendita";

    private void Cancel() => MudDialog.Cancel();

    protected override void OnInitialized() => ApplyFilters();

    private void OnFilterInput(ChangeEventArgs e)
    {
        FilterText = e.Value?.ToString();
        ApplyFilters();
    }

    private void ClearFilter()
    {
        FilterText = null;
        ApplyFilters();
    }

    private void ApplyFilters()
    {
        var source = SteupDataService.PuntiVenditaList;

        FilteredList = (FilterText.IsNullOrEmpty()
                ? source
                : source.FindAll(x =>
                    (x.Indirizzo != null && x.Indirizzo.ContainsIgnoreCase(FilterText!)) ||
                    (x.Descrizione != null && x.Descrizione.ContainsIgnoreCase(FilterText!)) ||
                    (x.CodMdep != null && x.CodMdep.ContainsIgnoreCase(FilterText!)) ||
                    (x.Citta != null && x.Citta.ContainsIgnoreCase(FilterText!)) ||
                    (x.Cap != null && x.Cap.ContainsIgnoreCase(FilterText!)) ||
                    (x.Provincia != null && x.Provincia.ContainsIgnoreCase(FilterText!))))
            .OrderBy(x => x.CodMdep)
            .ToList();

        StateHasChanged();
    }
}