SteUP_Dotnet/SteUp.Shared/Components/SingleElements/Modal/ModalSelectArt.razor

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

@*
    Scelta degli articoli dalla griglia. Al posto del menu a tendina a selezione
    multipla, un elenco a schermo intero con righe da 56px: si centra con i
    guanti, e il conteggio dei selezionati resta sempre a vista.
*@

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

            @if (!Articoli.IsNullOrEmpty())
            {
                <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 descrizione o codice"
                               autocapitalize="none" autocorrect="off"
                               aria-label="Cerca un articolo"
                               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 (Articoli.IsNullOrEmpty())
                    {
                        <div class="empty-state">
                            <i class="empty-state__icon ri-inbox-line" aria-hidden="true"></i>
                            <p class="empty-state__title">Nessun articolo in griglia</p>
                            <p class="empty-state__text">
                                Per questo reparto e motivo non ci sono articoli: usa lo scanner o digita il codice.
                            </p>
                        </div>
                    }
                    else if (Filtrati.Count == 0)
                    {
                        <div class="empty-state">
                            <i class="empty-state__icon ri-search-line" aria-hidden="true"></i>
                            <p class="empty-state__title">Nessun risultato</p>
                            <p class="empty-state__text">Nessun articolo corrisponde alla ricerca.</p>
                            <div class="empty-state__action">
                                <MudButton Variant="Variant.Outlined" OnClick="@ClearFilter">
                                    Azzera la ricerca
                                </MudButton>
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="stack stack-xs">
                            <Virtualize Items="Filtrati" Context="art" OverscanCount="8">
                                <button type="button" class="select-row"
                                        aria-pressed="@(IsSelected(art) ? "true" : "false")"
                                        @onclick="@(() => Toggle(art))">
                                    <span class="select-row__check" aria-hidden="true">
                                        <i class="ri-check-line"></i>
                                    </span>
                                    <span class="select-row__text">
                                        <span class="select-row__title">@art.Descrizione</span>
                                        <span class="select-row__meta">@art.Barcode</span>
                                    </span>
                                </button>
                            </Virtualize>
                        </div>
                    }
                </div>
            </div>

            @if (!Articoli.IsNullOrEmpty())
            {
                <div class="action-bar">
                    <MudButton Variant="Variant.Outlined" OnClick="@Cancel">Annulla</MudButton>
                    <MudButton Variant="Variant.Filled" Color="Color.Primary"
                               Disabled="@(_selected.Count == 0)" OnClick="@Submit">
                        @(_selected.Count == 0 ? "Aggiungi" : $"Aggiungi {_selected.Count}")
                    </MudButton>
                </div>
            }
        </div>
    </DialogContent>
</MudDialog>

@code {
    [CascadingParameter] private IMudDialogInstance MudDialog { get; set; } = null!;
    [Parameter] public List<ArticoliInGrigliaDto>? Articoli { get; set; }

    private readonly List<ArticoliInGrigliaDto> _selected = [];
    private string? FilterText { get; set; }

    private List<ArticoliInGrigliaDto> Filtrati =>
        FilterText.IsNullOrEmpty()
            ? Articoli ?? []
            : (Articoli ?? []).FindAll(x =>
                x.Descrizione.ContainsIgnoreCase(FilterText!) ||
                x.Barcode.ContainsIgnoreCase(FilterText!));

    private string? Conteggio => Articoli.IsNullOrEmpty()
        ? null
        : _selected.Count > 0
            ? $"{_selected.Count} selezionat{(_selected.Count == 1 ? "o" : "i")}"
            : $"{Articoli!.Count} disponibili";

    private bool IsSelected(ArticoliInGrigliaDto art) => _selected.Contains(art);

    private void Toggle(ArticoliInGrigliaDto art)
    {
        if (!_selected.Remove(art)) _selected.Add(art);
    }

    private void OnFilterInput(ChangeEventArgs e) => FilterText = e.Value?.ToString();

    private void ClearFilter() => FilterText = null;

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

    private void Submit() => MudDialog.Close(DialogResult.Ok(_selected.ToList()));
}