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

namespace MvcExplorer.Controllers
{
    public partial class MultiSelectController : Controller
    {
        private readonly ControlOptions _multiSelectOptions = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Show Filter Input", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
                {"Check On Filter", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
                {"Case Sensitive Search",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}}
            }
        };

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

@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
    List<string> countries = ViewBag.Countries;
}
@section Scripts{
    <script>
        var checkedItemsChanged = function (sender, e) {
            var i, result = document.getElementById("result"),
                items = sender.checkedItems;

            if (result) {
                result.innerHTML = "";
            }

            for (i = 0; i < items.length; i++) {
                result.innerHTML += "<span>" + (i + 1) + ". " + items[i] + "<\/span><br>";
            }
        }

        function delayChanged(sender, args) {
            var multiselect = wijmo.Control.getControl('#multiselect');
            multiselect.delay = sender.value;
        }
    </script>
}
<div>
    <label>@Html.Raw(MultiSelectRes.Index_Text0)</label>

    <c1-multi-select id="multiselect" placeholder="@MultiSelectRes.Index_Placeholder" header-format="@MultiSelectRes.Index_HeaderFormat" checked-items-changed="checkedItemsChanged"
                     filter-input-placeholder="@MultiSelectRes.Index_FilterInputPlaceholder"
                     show-filter-input="@Convert.ToBoolean(optionsModel.Options["Show Filter Input"].CurrentValue)"
                     check-on-filter="@Convert.ToBoolean(optionsModel.Options["Check On Filter"].CurrentValue)"
                     case-sensitive-search="@Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)">
        <c1-items-source source-collection="countries" />
    </c1-multi-select>

    <label>@Html.Raw(MultiSelectRes.Index_SelectResults)</label>
    <div id="result"></div>
</div>

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

    <label style="font-weight:normal;margin-top:10px;">@Html.Raw(MultiSelectRes.Delay_Text0)</label>
    <c1-input-number min="0" max="10000" step="100" value="500" format="n0" width="200px" value-changed="delayChanged" />
}

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