using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;
using MvcExplorer.Models;

namespace MvcExplorer.Controllers.CollectionView
{
    public partial class CollectionViewController : Controller
    {
        private readonly ControlOptions _collectionViewoptions = new ControlOptions
        {
            Options = new OptionDictionary
            {        
                //{"By Bapge", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "False"}},
                {"Repeat Buttons", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
                //{"HeaderFormat",new OptionItem{Values = new List<string> {"None", "Item: {current:n0} / {count:n0}", "Page: {currentPage} / {pageCount}"},CurrentValue = "None"}},
                {"Css Class", new OptionItem {Values = new List<string> {"None", "Red" , "Blue" , "Green"}, CurrentValue = "None"}},
            }
        };

        public ActionResult CollectionViewNavigator(IFormCollection collection)
        {
            _collectionViewoptions.LoadPostData(collection);
            ViewBag.DemoOptions = _collectionViewoptions;
            return View();
        }

        public ActionResult CollectionViewNavigator_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
        {
            var extraData = requestData.ExtraRequestData
                 .ToDictionary(kvp => kvp.Key, kvp => new StringValues(kvp.Value.ToString()));
            var data = new FormCollection(extraData);
            _collectionViewoptions.LoadPostData(data);
            var model = Sale.GetData(500);
            return this.C1Json(CollectionViewHelper.Read(requestData, model));
        }
    }
}

@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
}

<style type="text/css">
    .Red {
        color: red !important;
    }

    .Blue {
        color: blue !important;
    }

    .Green {
        color: green !important;
    }

    .None {
        color: none;
    }

    .wj-collectionview-navigator .wj-btn .wj-glyph-right,
    .wj-collectionview-navigator .wj-btn .wj-glyph-left,
    .wj-collectionview-navigator .wj-btn .wj-glyph-step-forward,
    .wj-collectionview-navigator .wj-btn .wj-glyph-step-backward
    {
        pointer-events: none;
    }
</style>

@section Scripts{
    <script>
        c1.documentReady(function () {
            function getCSS(el) {
                if (el.currentStyle)
                    return el.currentStyle;
                else if (window.getComputedStyle)
                    return document.defaultView.getComputedStyle(el, null);
                else return {};
            }
            function setCSS(el, css, rxFilter) {
                for (var key in css) {
                    if (!rxFilter || rxFilter.test(key))
                        el.style[key] = css[key];
                }
            }

            function measureWidthPx(input) {
                var el = document.createElement('div');
                setCSS(el, getCSS(input), /padding|border|padding|font|zoom/);
                el.style.position = 'absolute';
                el.style.float = "left";
                el.style.visibility = 'hidden';
                el.style.whiteSpace = 'nowrap';
                el.style.width = "auto";
                el.style.height = "auto";
                el.textContent = input.value;
                el = document.body.appendChild(el);
                var w = el.offsetWidth + 20;
                el.parentNode.removeChild(el);
                return w + "px";
            }

            function updateCvnWidth(headerElem) {
                setTimeout(function () {
                    if (headerElem.value != headerElem._value) {
                        headerElem.style.width = measureWidthPx(headerElem);
                        headerElem._value = headerElem.value;
                    } else updateCvnWidth(headerElem);
                }, 10)
            }

            var cvnIds = ['#CVNavigatorToCV', '#CVNavigatorToGridCV'];
            cvnIds.forEach(function (cvnId) {
                var cvn = wijmo.Control.getControl(cvnId);
                var headerElem = cvn._txtCurr;
                updateCvnWidth(headerElem);
                cvn.cv.currentChanged.addHandler(function (s, e) { updateCvnWidth(headerElem) });
                cvn.cv.pageChanged.addHandler(function (s, e) { updateCvnWidth(headerElem) });
            })
        });
    </script>
}

<c1-items-source id="CVService" initial-items-count="500" read-action-url="@Url.Action("Index_Bind")" page-size="16"></c1-items-source>

<c1-collection-view-navigator id="CVNavigatorToCV" items-source-id="CVService"
                              by-page="false" header-format="Item: {current:n0} / {count:n0} - Page {currentPage}"
                              repeat-buttons="@Convert.ToBoolean(optionsModel.Options["Repeat Buttons"].CurrentValue)"
                              class="@optionsModel.Options["Css Class"].CurrentValue"
                              style="background-color:lightgray">
</c1-collection-view-navigator>

<c1-flex-grid id="FlexGridCVN" items-source-id="CVService" auto-generate-columns="false"
              sorting-type="SingleColumn" class="grid" is-read-only="true"
              selection-mode="@SelectionMode.Row">
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>

</c1-flex-grid>

<c1-collection-view-navigator id="CVNavigatorToGridCV" items-source-id="FlexGridCVN"
                              by-page="true" header-format="Page: {currentPage} / {pageCount}"
                              repeat-buttons="@Convert.ToBoolean(optionsModel.Options["Repeat Buttons"].CurrentValue)"
                              class="@optionsModel.Options["Css Class"].CurrentValue"
                              style="background-color:lightgray">
</c1-collection-view-navigator>

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

@section Description{
    @Html.Raw(CollectionViewRes.CollectionViewNavigator_Text0)
}