using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using System.Collections.Generic;

namespace MvcExplorer.Controllers
{
    public partial class ListBoxController : Controller
    {
        private readonly ControlOptions _options = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Case Sensitive Search",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}},
                {"Virtualization Threshold",new OptionItem{ Values = new List<string> { "Disable" , "0" }, CurrentValue = "Disable"}}
            }
        };
        public ActionResult Index(IFormCollection collection)
        {
            _options.LoadPostData(collection);
            ViewBag.DemoOptions = _options;
            ViewBag.Cities = Cities.GetCities();
            return View();
        }
    }
}

@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
    List<string> cities = ViewBag.Cities;
    string vThreshold = optionsModel.Options["Virtualization Threshold"].CurrentValue;
}

<div>
    <label>@Html.Raw(ListBoxRes.Index_Text0)</label>
    <div class="wj-input" style="margin: 5px 0px">
        <input type="text" id="searchValue" class="wj-form-control" placeholder="@Html.Raw(ListBoxRes.EnterTextSearch_Text0)" style="width:250px; height: 30px" />
    </div>
    <div id="list" style="width:250px;height:200px"></div>
</div>
<p><b>@Html.Raw(ListBoxRes.Index_SearchResult) <span id="lbSelResult"></span></b></p>
<p><b>@Html.Raw(ListBoxRes.Index_SelectedIndex) <span id="lbSelIdx"></span></b></p>
<p><b>@Html.Raw(ListBoxRes.Index_SelectedValue) <span id="lbSelVal"></span></b></p>
<p><b>@Html.Raw(ListBoxRes.Index_VirtualizationThreshold) <span id="lbSelVThreshold"></span></b></p>

<c1-list-box id="list" selected-index="0" selected-index-changed="selectedIndexChanged"
             case-sensitive-search="@Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)"
             virtualization-threshold="@vThreshold.Equals("Disable") ? int.MaxValue : int.Parse(vThreshold)">
    <c1-items-source source-collection="@cities"></c1-items-source>
</c1-list-box>

@section Settings{
    @await Html.PartialAsync("_OptionsMenu", optionsModel)
}

@section Description{
    <p>@Html.Raw(ListBoxRes.Index_Text1)</p>
    <p>@Html.Raw(ListBoxRes.CaseSensitiveSearchDescription_Text0)</p>
    <p>@Html.Raw(ListBoxRes.Index_Text2)</p>
}

@section Scripts{
    <script>
        function selectedIndexChanged(sender) {
            document.getElementById('lbSelIdx').innerHTML = sender.selectedIndex;
            document.getElementById('lbSelVal').innerHTML = sender.selectedValue;
        }

        c1.documentReady(function () {
            document.getElementById("searchValue").addEventListener("keyup", function (e) {
                var listbox = wijmo.Control.getControl('#list');
                listbox.selectedIndex = -1;
                listbox._search = this.value;
                listbox.selectedIndex = listbox._findNext();

                var searchValue = document.getElementById("searchValue").value;
                if (searchValue === '') {
                    document.getElementById('lbSelResult').innerHTML = null;
                    return;
                }

                var searchResult;
                if ('@optionsModel.Options["Case Sensitive Search"].CurrentValue' === 'False') {
                    searchResult = listbox.itemsSource.items.filter(function (c) {
                        if (c.toLowerCase().indexOf(searchValue.toLowerCase()) == 0) return c;
                    });
                } else {
                    searchResult = listbox.itemsSource.items.filter(function (c) {
                        if (c.indexOf(searchValue) == 0) return c;
                    });
                }
                document.getElementById('lbSelResult').innerHTML = searchResult.join(", ");
            });

            document.getElementById('lbSelVThreshold').innerHTML = document.getElementById("list").childNodes.length;
        });
    </script>
}