using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;

namespace MvcExplorer.Controllers
{
    public partial class MultiSelectListBoxController : Controller
    {
        private C1NWindEntities db = new C1NWindEntities();

        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(FormCollection 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(Resources.ListBox.Index_VirtualizationThreshold)<span id="lbSelVThreshold"></span></b>
    </p>
</div>

@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>
}

@(Html.C1().MultiSelectListBox("#multiSelectList")
        .Bind(Model)
        .DisplayMemberPath("ProductName")
        .CheckedMemberPath("Discontinued")
        .ShowSelectAllCheckbox(Convert.ToBoolean(optionsModel.Options["Show Select All Checkbox"].CurrentValue))
        .ShowFilterInput(Convert.ToBoolean(optionsModel.Options["Show Filter Input"].CurrentValue))
        .OnClientCheckedItemsChanged("checkedItemsChanged")
        .SelectedIndex(8)
        .CaseSensitiveSearch(Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue))
        .VirtualizationThreshold(vThreshold.Equals("Disable") ? int.MaxValue : int.Parse(vThreshold))
        .Delay(Convert.ToInt16(optionsModel.Options["Delay Filter"].CurrentValue))
)

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

@section Summary{
    @Html.Raw(Resources.MultiSelectListBox.Index_Text0)
}

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

}