using MultiRowExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        //
        // GET: /Grouping/

        public ActionResult Grouping()
        {
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = new Dictionary<string, object[]>
                {
                    {"GroupBy", new object[]{"Customer State", "Customer City", "Customer State and Customer City", "Ordered Date", "Shipped Date", "Amount","None"}},
                    {"ShowGroups", new object[] {true, false } }
                }
            };

            return View();
        }

        public ActionResult Grouping_Bind([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
        }
    }
}

@model IEnumerable<Orders.Order>
@{
    var cities = Orders.GetCities().ToValues();
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ViewBag.DemoSettings = true;
}

@section Scripts{
    <script>
        function collapseAllGroups() {
            var mr = wijmo.Control.getControl("#@settings.ControlId");
            mr.collapseGroupsToLevel(0);
        }
        function expandAllGroups() {
            var mr = wijmo.Control.getControl("#@settings.ControlId");
            mr.collapseGroupsToLevel(10);
        }
    </script>
}

<input type="button" value="@Html.Raw(MultiRowRes.Grouping_Text2)" class="btn" onclick="collapseAllGroups()" />
<input type="button" value="@Html.Raw(MultiRowRes.Grouping_Text3)" class="btn" onclick="expandAllGroups()" />

<c1-multi-row id="@settings.ControlId" class="multirow" is-read-only="true" group-by="Customer.State" show-groups="true">
    <c1-items-source read-action-url="@Url.Action("Grouping_Bind")" disable-server-read="true"></c1-items-source>
    <c1-multi-row-cell-group header="Order" colspan="2">
        <c1-multi-row-cell binding="Id" header="ID" class="id" colspan="2" />
        <c1-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" colspan="2" />
        <c1-multi-row-cell binding="Date" header="Ordered" />
        <c1-multi-row-cell binding="ShippedDate" header="Shipped" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Customer" colspan="3">
        <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" />
        <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="Customer Email" class="email" colspan="2" />
        <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="Address" colspan="2" />
        <c1-multi-row-cell binding="Customer.Phone" name="CustomerPhone" header="Customer Phone" />
        <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="City" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.DropDownList">
            <c1-data-map display-member-path="Value" selected-value-path="Value">
                <c1-items-source source-collection="cities" />
            </c1-data-map>
        </c1-multi-row-cell>
        <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="State" />
        <c1-multi-row-cell binding="Customer.Zip" name="CustomerZip" header="Zip" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Shipper">
        <c1-multi-row-cell binding="Shipper.Name" name="ShipperName" header="Shipper" width="*" />
        <c1-multi-row-cell binding="Shipper.Email" name="ShipperEmail" header="Shipper Email" class="email" />
        <c1-multi-row-cell binding="Shipper.Express" name="ShipperExpress" header="Express" />
    </c1-multi-row-cell-group>
</c1-multi-row>

@section Settings{
    <script>
        function customChangeGroupBy(grid, name) {
            var groupDescriptions = grid.collectionView.groupDescriptions;
            grid.beginUpdate();
            groupDescriptions.clear();

            if (name.indexOf("Customer State") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Customer.State"));
            }

            if (name.indexOf("Customer City") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Customer.City"));
            }

            if (name.indexOf("Ordered Date") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Date", formatDateValue));
            }

            if (name.indexOf("Shipped Date") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("ShippedDate", formatDateValue));
            }

            if (name.indexOf("Amount") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Amount", function (item, prop) {
                    var value = item[prop];
                    if (value <= 1000) {
                        return "0 to 1000";
                    }

                    if (value > 1000 && value <= 2000) {
                        return "1000 to 2000";
                    }

                    if (value > 2000 && value <= 3000) {
                        return "2000 to 3000";
                    }

                    if (value > 3000 && value <= 4000) {
                        return "3000 to 4000";
                    }

                    if (value > 4000 && value <= 5000) {
                        return "4000 to 5000";
                    }

                    return "More than 5000";
                }));
            }

            grid.endUpdate();
        }

        function formatDateValue(item, prop) {
            var value = item[prop];
            if (!value) {
                return "";
            } else {
                return value.getFullYear() + "/" + (value.getMonth() + 1);
            }
        }
    </script>
}

@section Description{
<p>@Html.Raw(MultiRowRes.Grouping_Text0)</p>

<p>@Html.Raw(MultiRowRes.Grouping_Text1)</p>

}