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

namespace MvcExplorer.Controllers
{
    public partial class MultiSelectListBoxController : Controller
    {
        private readonly C1NWindEntities _db;

        public MultiSelectListBoxController(C1NWindEntities db)
        {
            _db = db;
        }

        private readonly ControlOptions _multiSelectOptions = new ControlOptions
        {
          Options = new OptionDictionary
                {
                    {"Show Select All Checkbox", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
                    {"Show Filter Input", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
                    {"Case Sensitive Search", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "false"}},
                    {"Delay Filter", new OptionItem {Values = new List<string> {"500", "1000", "2000"}, CurrentValue = "500"}},
                    {"Virtualization Threshold",new OptionItem{ Values = new List<string> { "Disable" , "0" }, CurrentValue = "Disable"}}
                }
        };

        public ActionResult Index(IFormCollection collection)
        {
          _multiSelectOptions.LoadPostData(collection);
          ViewBag.DemoOptions = _multiSelectOptions;
          return View(_db.Products);
        }
  }
}

@model IEnumerable<Product>

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

<div style="overflow: auto">
    <div class="col-md-5">
        <div id="multiSelectList" style="width:100%;max-width:400px;max-height:530px;"></div>
    </div>
    <div class="col-md-7">
        <p>
            <b>Checked Items:</b>
        </p>
        <div style="height:500px; overflow-y:auto; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;">
            <ul id="checkedItems" class="col-md-5"></ul>
            <ul id="checkedItems1" class="col-md-5"></ul>
        </div>
    </div>
    <p><b>@Html.Raw(ListBoxRes.Index_VirtualizationThreshold) <span id="lbSelVThreshold"></span></b></p>
</div>

<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName" checked-member-path="Discontinued"
                          show-select-all-checkbox="@Convert.ToBoolean(optionsModel.Options["Show Select All Checkbox"].CurrentValue)"
                          show-filter-input="@Convert.ToBoolean(optionsModel.Options["Show Filter Input"].CurrentValue)"
                          checked-items-changed="checkedItemsChanged" selected-index="8"
                          delay="@Convert.ToInt16(optionsModel.Options["Delay Filter"].CurrentValue)"
                          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="Model"></c1-items-source>
</c1-multi-select-list-box>

@section Scripts{
    <script>
        c1.documentReady(function () {
            let multiSelectList = wijmo.Control.getControl("#multiSelectList");
            checkedItemsChanged(multiSelectList);
            document.getElementById('lbSelVThreshold').innerHTML = document.getElementById("multiSelectList").querySelector("[wj-part='list-box'").childNodes.length;
        })
        // CheckedItemsChanged event handler
        function checkedItemsChanged(sender) {
            let html = '',
                html1 = '',
                items = sender.checkedItems,
                n = items.length;
            if (n > 40) n = n / 2;
            else if (n > 20) n = 20;
            items.forEach(function (item) {
                n--;
                if (n >= 0) {
                    html += "<li>" + item.ProductName + "</li>";
                } else {
                    html1 += "<li>" + item.ProductName + "</li>";
                }
            });
            document.querySelector('#checkedItems').innerHTML = html;
            document.querySelector('#checkedItems1').innerHTML = html1;
        }
    </script>
}

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

@section Summary{
    @Html.Raw(MultiSelectListBoxRes.Index_Text0)
}

@section Description{
    @Html.Raw(MultiSelectListBoxRes.Index_Text1)
    @Html.Raw(MultiSelectListBoxRes.Index_Text2)
    <br />
    @Html.Raw(MultiSelectListBoxRes.Index_Text3)
    <br />
    @Html.Raw(MultiSelectListBoxRes.Index_Text4)
    <br />
    @Html.Raw(MultiSelectListBoxRes.Index_Text5)

}