@using TelerikBlazorDemos.DataAccess.Services
@using TelerikBlazorDemos.DataAccess.Dto
@using System.Linq;
@page "/dropdownlist/virtualization"

@inject HttpClient http


<label>This is selected City/AreaID: @Value</label>
<div class="k-form demo-section k-form-vertical">
    <div class="k-form-field">
        <label for="city-select" class="k-label k-form-label">Select a country</label>
        <div class="k-form-field-wrap">
            <TelerikDropDownList @bind-Value="@CountryString"  @ref="@CountriesDDL"                               
                                 Data="@Countries"
                                 OnChange="CountryOnChange"
                                 Width="100%"
                                 PageSize="10"
                                 ItemHeight="35"
                                 >
                <DropDownListSettings>
                    <DropDownListPopupSettings Height="300px"></DropDownListPopupSettings>
                </DropDownListSettings>
                
            </TelerikDropDownList>
        </div>
    </div>
</div>


<div class="k-form demo-section k-form-vertical">
    <div class="k-form-field">
        <label for="city-select" class="k-label k-form-label">Select a city</label>
        <div class="k-form-field-wrap">
            <TelerikDropDownList @bind-Value="@Value" Enabled="@(CountryString != null)" @ref="@CitiesDDL"
                                 Id="city-select"
                                 ScrollMode="@DropDownScrollMode.Virtual"
                                 Data="@UrbanAreas"
                                 ValueField="@(nameof(UrbanAreaDto.Id))"
                                 TextField="@(nameof(UrbanAreaDto.City))"
                                 Width="100%"
                                 DefaultText = "Select City"
                                 PageSize="10"
                                 ItemHeight="35"
                                 Filterable="true"
                                 FilterOperator="@StringFilterOperator.Contains">
                <DropDownListSettings>
                    <DropDownListPopupSettings Height="300px"></DropDownListPopupSettings>
                </DropDownListSettings>
                <ItemTemplate>
                    <span>@($"{context.City} ({context.Country})")</span>
                </ItemTemplate>
            </TelerikDropDownList>
        </div>
    </div>
</div>

<br/>
<p>to trigger the skip not reset issue:</p>
    <p>1. Select country = China since it has more cities. <br/>2. select a city: scroll to the last city to show skip value is not reset after dataSource has been changed.</p>
    <p>3. Select country = USA (wait until data has been fully loaded), <br/>4. select a city: the city dropdown is empty, in the debugger the skip value is not reset to 0</p>

@code{
    public string CountryString {get;set;}
    public List<string> Countries = new(){"China","United States of America"};

    public TelerikDropDownList<string, string> CountriesDDL { get; set; }
    public TelerikDropDownList<UrbanAreaDto, int> CitiesDDL { get; set; }

    private async Task CountryOnChange(object value)
    {
        //reset cascading
        Value = 0;
        StateHasChanged();
        if (value == null)
        {
            return;
        }

        var currentCountry = (string)value;

        
        var AllAreas = await urbanAreaService.GetUrbanAreas();

        var AllUrbanAreasInSelectedCounties = AllAreas.Where(x => x.Country == currentCountry);

        UrbanAreas = AllUrbanAreasInSelectedCounties;

        //how to reset skip and filtering on cityDropdown?

        //CitiesDDL.Rebind(); //to call onRead
    }
}

@code {
    private UrbanAreaService _urbanAreaService;
    private UrbanAreaService urbanAreaService
    {
        get
        {
            if(_urbanAreaService == null)
            {
                _urbanAreaService = new UrbanAreaService(http);
            }

            return _urbanAreaService;
        }
    }
    public IEnumerable<UrbanAreaDto> UrbanAreas { get; set; }
    public int Value { get; set; }

    protected override async Task OnInitializedAsync()
    {
        UrbanAreas = await urbanAreaService.GetUrbanAreas();
    }
}

<style>
    .box {
        margin: 4.5em 7.5em;
        padding: 3em;
        background-color: rgba(20,53,80,0.038);
        border: 1px solid rgba(20,53,80,0.05);
    }

    .demo-section {
        margin: 0 auto;
        padding: 3em;
        border: 1px solid rgba(20,53,80,0.14);
        box-shadow: 0 1px 2px 1px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.08);
    }

    .auto {
        max-width: max-content;
    }

    .demo-section:not(.wide):not(.auto),
    .box:not(.wide):not(.auto) {
        max-width: 500px;
    }

    .box:after,
    .demo-section:after {
        content: ";
        display: block;
        clear: both;
        height: 0;
    }

    .box {
        margin: 4.5em auto;
    }

    .box:first-child {
        margin-top: 0;
    }

    .center {
        text-align: center;
    }

    .demo-section.editor {
        max-width: 100%;
        border: none;
    }
    .demo-alert {
        font: normal 18px "Metric";
        border-radius: 2px;
        margin: 20px auto 40px auto;
        padding: 20px;
        border-left: 4px solid;
    }

    .demo-alert-success {
        border-left-color: rgb(55,180,0);
        background: rgba(55,180,0, 0.1);
    }

    .demo-alert-info {
        border-left-color: rgb(83,146,228);
        background: rgba(83,146,228, 0.1);
    }

    .demo-alert-error {
        border-left-color: rgb(243, 23, 0);
        background: rgba(243, 23, 0, 0.1);
    }

    .demo-alert-warning {
        border-left-color: rgb(255, 192, 0);
        background: rgba(255, 192, 0, 0.1);
    }
</style>