@page "/TestComponenti"
@using static EgwCoreLib.Razor.Sorter

@inject NavigationManager NavMan
@implements IDisposable

<PageTitle>Test</PageTitle>

<div class="card shadow">
    <div class="card-header">
        <h1>Test Componenti custom</h1>
    </div>
    <div class="card-body py-4">
        <div class="row">
            <div class="col-3">
                <div class="card shadow">
                    <div class="card-header">
                        Test Image
                    </div>
                    <div class="card-body py-1">
                        <img src="_content/EgwCoreLib.Razor/images/LogoEgw.png" class="img-fluid" width="200" height="200" />
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card shadow">
                    <div class="card-header">
                        Input password
                    </div>
                    <div class="card-body py-1">
                        <ul class="list-group">
                            <li class="list-group-item">
                                Standard
                                <PasswordBox></PasswordBox>
                            </li>
                            <li class="list-group-item">
                                Cambio label
                                <PasswordBox ItemLabel="pwd"></PasswordBox>
                            </li>
                            <li class="list-group-item">
                                Show disabilitato
                                <PasswordBox DisableShow="true"></PasswordBox>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card shadow">
                    <div class="card-header">
                        Input Speciali
                    </div>
                    <div class="card-body py-1">
                        <small>Test copia clipboard, GUID (presudo)random</small>
                        <CopyToClipboard Text="@textToCopy"></CopyToClipboard>
                        <br />
                        <small>Test copia clipboard, valore hidden</small>
                        <CopyToClipboard Text="@textToCopy" ShowText="false"></CopyToClipboard>
                        <hr />
                        <small>Input numerico con gestione cifre (es x double)</small>
                        <NumInput CssClass="form-control" @bind-Value="@valDecimale"></NumInput>
                        <div>
                            <b>@valDecimale</b>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card shadow">
                    <div class="card-header">
                        QueryString
                    </div>
                    <div class="card-body py-1">


                        Test valori QueryString
                        <ul class="list-group">
                            <li class="list-group-item d-flex justify-content-between">
                                QString <b>Nome</b>:
                                <span class="badge bg-primary rounded-pill">
                                    @if (!string.IsNullOrEmpty(qsNome))
                                    {
                                        @qsNome
                                    }
                                    else
                                    {
                                        <span>-</span>
                                    }
                                </span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                QString <b>Intero</b>:
                                <span class="badge bg-primary rounded-pill">
                                    @if (qsIntero > 0)
                                    {
                                        @qsIntero
                                    }
                                    else
                                    {
                                        <span>-</span>
                                    }
                                </span>
                            </li>
                            <li class="list-group-item">
                                <NavLink type="button" class="btn btn-primary bg-gradient text-light w-100" href="TestComponenti">
                                    <i class="fa-solid fa-wrench" aria-hidden="true"></i>
                                    <small>Reload Vuoto</small>
                                </NavLink>
                            </li>
                            <li class="list-group-item">
                                <NavLink type="button" class="btn btn-primary bg-gradient text-light w-100" href="@($"TestComponenti?Nome=Test_{DateTime.Now:mm}")">
                                    <i class="fa-solid fa-wrench" aria-hidden="true"></i>
                                    <small>Reload Nome</small>
                                </NavLink>
                            </li>
                            <li class="list-group-item">
                                <NavLink type="button" class="btn btn-primary bg-gradient text-light w-100" href="@($"TestComponenti?Intero={DateTime.Now:ss}")">
                                    <i class="fa-solid fa-wrench" aria-hidden="true"></i>
                                    <small>Reload Intero</small>
                                </NavLink>
                            </li>
                            <li class="list-group-item">
                                <NavLink type="button" class="btn btn-primary bg-gradient text-light w-100" href="@($"TestComponenti?Nome=Test_{DateTime.Now:mm}&Intero={DateTime.Now:ss}")">
                                    <i class="fa-solid fa-wrench" aria-hidden="true"></i>
                                    <small>Reload All</small>
                                </NavLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-header"><h4>Test toggler</h4></div>
                    <div class="card-body">
                        <Toggler SelFilter="@TogFilter"></Toggler>
                        <br />
                        <NumInput Value="@numero"></NumInput>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-header"><h4>Test switch pager</h4></div>
                    <div class="card-body">
                        <span class="form-check form-switch">
                            <label class="form-check-label">Small Pager</label>
                            <input class="form-check-input" type="checkbox" @bind="@ShowSmallPager">
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-header"><h4>Test Sorter</h4></div>
                    <div class="card-body">
                        <table class="table table-sm table-striped table-responsive-lg">
                            <thead>

                                <tr>
                                    <th>
                                        Col A
                                        <Sorter ParamName="ColA" IsAsc="@sortAsc" CurrParam="@sortField" sortReq="SortRequested"></Sorter>
                                    </th>
                                    <th>
                                        ColB
                                        <Sorter ParamName="ColB" IsAsc="@sortAsc" CurrParam="@sortField" sortReq="SortRequested"></Sorter>
                                    </th>
                                    <th>
                                        Col C
                                        <Sorter ParamName="ColC" IsAsc="@sortAsc" CurrParam="@sortField" sortReq="SortRequested"></Sorter>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Sort param</td>
                                    <td>@sortField</td>
                                    <td>@sortAsc</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-header"><h4>Test RadioButtons</h4></div>
                    <div class="card-body">
                        <div>Multi</div>
                        <MultiButton ListValues="@ListButtons" EC_ValueChanged="SaveRBLSel"></MultiButton>
                        <div>Single</div>
                        <MultiButton ListValues="@ListChecks" ClassSel="btn-warning" ClassDesel="btn-secondary opacity-50" EC_ValueChanged="SaveRBLSel" MultiSel="false"></MultiButton>
                        <hr />
                        <p>@valSel</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer">
        @if (ShowSmallPager)
        {
            <DataPager currPage="1" totalCount="@numero" NumPages="4" DisplSize="DataPager.ObjSize.small"></DataPager>
        }
        else
        {
            <DataPager currPage="1" totalCount="@numero"></DataPager>
        }
    </div>
</div>



@code {

    protected void SaveRBLSel(MultiButton.ItemData newVal)
    {
        valSel = $"{newVal.Text}: sel: {newVal.Selected}";
    }

    Toggler.SelectGlobalToggle TogFilter { get; set; } = new Toggler.SelectGlobalToggle();
    protected string textToCopy = $"{Guid.NewGuid()}";
    protected decimal valDecimale = 12345;

    private string qsNome = "";
    private int qsIntero = -1;
    private int numero = 0;

    private bool sortAsc = false;
    private string sortField = "";

    protected void SortRequested(SortCallBack e)
    {
        if (sortField == e.ParamName)
        {
            sortAsc = e.IsAscending;
        }
        sortField = e.ParamName;
    }

    private bool ShowSmallPager { get; set; } = false;

    protected Random rnd = new Random();

    protected override void OnInitialized()
    {
        // base.OnInitialized();
        qsNome = NavMan.ExtractQueryStringByKey<string>("Nome");
        qsIntero = NavMan.ExtractQueryStringByKey<int>("Intero");
        NavMan.LocationChanged += LocationChanged;
        // toggler!
        TogFilter = new()
        {
            isActive = true,
            leftString = "opzione sx",
            rightString = "opzione dx"
        };

        //test input
        numero = rnd.Next(100, 300);

        // preparo buttons
        ListButtons = new List<MultiButton.ItemData>();
        for (int i = 1; i <= 4; i++)
        {
            ListButtons.Add(new MultiButton.ItemData()
            {
                CodItem = $"B{i:00}",
                Ordinal = i,
                Selected = false,
                Text = $"Btn_{i:00}",
                Tooltip = $"Toggle Button {i:00}"
            });
        }

        // preparo checks
        ListChecks = new List<MultiButton.ItemData>();
        for (int i = 1; i <= 4; i++)
        {
            ListChecks.Add(new MultiButton.ItemData()
            {
                CodItem = $"B{i:00}",
                Ordinal = i,
                Selected = false,
                Text = $"Chk_{i:00}",
                Tooltip = $"Switch {i:00}"
            });
        }
    }
    async void LocationChanged(object sender, LocationChangedEventArgs e)
    {
        qsNome = NavMan.ExtractQueryStringByKey<string>("Nome");
        qsIntero = NavMan.ExtractQueryStringByKey<int>("Intero");
        StateHasChanged();
    }

    void IDisposable.Dispose()
    {
        NavMan.LocationChanged -= LocationChanged;
    }


    private List<MultiButton.ItemData>? ListButtons = null;
    private string valSel = "";
    private List<MultiButton.ItemData>? ListChecks = null;
    private string checkSel = "";
}