using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
#if !NETCORE30 && !NET50
using Microsoft.AspNetCore.Http.Internal;
#endif
using Microsoft.Extensions.Primitives;
using Microsoft.AspNetCore.Http;

namespace MvcExplorer.Controllers
{
    public partial class FlexGridController : Controller
    {
        private static List<SaleShowCase> model;
        private readonly ControlOptions _showcaseOption = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Data Size",new OptionItem{Values = new List<string> {"5 Rows", "50 Rows", "500 Rows", "5000 Rows", "50000 Rows", "100000 Rows"},CurrentValue = "500 Rows"}},
                {"Lazy Render",new OptionItem{Values = new List<string> {"True", "False"},CurrentValue = "True"}}
            }
        };
        public ActionResult ShowCase(IFormCollection collection)
        {
            _showcaseOption.LoadPostData(collection);
            ViewBag.DemoOptions = _showcaseOption;
            ViewBag.Countries = FullCountry.GetCountries();
            ViewBag.Products = ProductObject.GetProductObjects();
            ViewBag.Colors = ColorObject.GetColorObjects();
            Theme.SetCurrentTheme(HttpContext, Themes.CleanLight);
            return View(model);
        }
        public ActionResult ShowCase_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
        {
            var extraData = requestData.ExtraRequestData
                 .ToDictionary(kvp => kvp.Key, kvp => new StringValues(kvp.Value.ToString()));
            var data = new FormCollection(extraData);
            _showcaseOption.LoadPostData(data);
            model = Sale.GetData(getDataSize()).Select(x => SaleShowCase.FromSale(x)).ToList();
            return this.C1Json(CollectionViewHelper.Read(requestData, model));
        }
        public ActionResult GridShowCaseUpdate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData)
        {
            return this.C1Json(CollectionViewHelper.Edit(requestData, sale =>
            {
                string error = string.Empty;
                bool success = true;
                try
                {
                    var fSale = model.Find(item => item.ID == sale.ID);
                    fSale.Country = sale.Country;
                    fSale.Amount = sale.Amount;
                    fSale.Start = sale.Start;
                    fSale.End = sale.End;
                    fSale.Product = sale.Product;
                    fSale.Active = sale.Active;
                    fSale.Amount2 = sale.Amount2;
                    fSale.Color = sale.Color;
                    fSale.Discount = sale.Discount;
                }
                catch (Exception e)
                {
                    error = e.Message;
                    success = false;
                }
                return new CollectionViewItemResult<Sale>
                {
                    Error = error,
                    Success = success,
                    Data = sale
                };
            }, () => model));
        }

        private int getDataSize()
        {
            int dataSize = 0;
            var dataSizeOption = _showcaseOption.Options["Data Size"].CurrentValue;
            switch (dataSizeOption)
            {
                case "5 Rows":
                    dataSize = 5;
                    break;
                case "50 Rows":
                    dataSize = 50;
                    break;
                case "500 Rows":
                    dataSize = 500;
                    break;
                case "5000 Rows":
                    dataSize = 5000;
                    break;
                case "50000 Rows":
                    dataSize = 50000;
                    break;
                case "100000 Rows":
                    dataSize = 100000;
                    break;
                case "500000 Rows":
                    dataSize = 500000;
                    break;
                case "1000000 Rows":
                    dataSize = 1000000;
                    break;
            }
            return dataSize;
        }
    }
}

@using C1.Web.Mvc.Grid

@model IEnumerable<SaleShowCase>
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
    List<FullCountry> countries = ViewBag.Countries;
    List<ProductObject> products = ViewBag.Products;
    List<ColorObject> colors = ViewBag.Colors;
}
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jszip.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.css" rel="stylesheet" />
<link href="~/Content/css/showcase.css" rel="stylesheet" />

<c1-tab-panel class="control-nav-tabs nav nav-tabs ui-helper-clearfix mob-hide-1">
    <div>
        <a>Data</a>
        <div class="tab-pane pane-content mob-hide-1">
            <div class="flex-container">
                <div>@await Html.PartialAsync("_OptionsMenu", optionsModel)</div>
                <div>Search: <span id="theSearch" style="width:300px;"></span></div>
                <div class="seperate"></div>
                <div>
                    <div><img src="~/Content/images/icons/Columns.png" width="20" height="20" class="export-img" id="column-picker" />Columns</div>
                    <div style="display:none">
                        <div id="theColumnPicker" class="column-picker"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <a>Export</a>
        <div class="tab-pane pane-content mob-hide-1">
            <div class="flex-container">
                <div>
                    <img src="~/Content/images/icons/Excel.png" width="20" height="20" id="export-excel" class="export-img" />Excel
                </div>
                <div>
                    <img src="~/Content/images/icons/Csv.png" width="20" height="20" id="export-csv" class="export-img" />Csv
                </div>
                <div>
                    <img src="~/Content/images/icons/pdf.png" width="20" height="20" id="export-pdf" class="export-img" />PDF
                </div>
            </div>
        </div>
    </div>
</c1-tab-panel>

<c1-flex-grid id="theFlexGrid" pinning-type="SingleColumn" auto-generate-columns="false"
              sorting-type="SingleColumn" selection-mode="CellRange" class="grid"
              copy-headers="Column" big-checkboxes="true" lazy-render="@Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue)" refresh-on-edit="true">
    <c1-flex-grid-group-panel max-groups="3"
                              placeholder="@Html.Raw(FlexGridRes.GroupPanel_Placeholder1)">
    </c1-flex-grid-group-panel>
    <c1-flex-grid-column binding="ID" is-read-only="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" format="MMM d yyyy">
        <c1-flex-grid-cell-template is-editing="true">
            <c1-input-date id="dateEditor" format="MM/dd/yyyy"
                           min="@Convert.ToDateTime("01/01/2000")" max="@Convert.ToDateTime("01/01/2030")"
                           template-bindings="@(new {Value="Start"})"
                           is-required="true">
            </c1-input-date>
        </c1-flex-grid-cell-template>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Country" width="145">
        <c1-data-map display-member-path="Name" selected-value-path="Name" sort-by-display-values="true">
            <c1-items-source source-collection="countries"></c1-items-source>
        </c1-data-map>
        <c1-flex-grid-cell-template>
            <span class='flag-icon flag-icon-{{CountryFlag}}'></span><span>{{Country}}</span>
        </c1-flex-grid-cell-template>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" header="Price" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="History" width="180" template-function="createSparkline"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color">
        <c1-data-map display-member-path="Name" selected-value-path="Name" sort-by-display-values="true">
            <c1-items-source source-collection="colors"></c1-items-source>
        </c1-data-map>
        <c1-flex-grid-cell-template>
            <span class="color-tile" style="background: {{Color}}"></span> {{Color}}
        </c1-flex-grid-cell-template>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" header="Change" is-read-only="true" format="c" template="<span class=${item && item.Amount > 0 ? 'change-up' : 'change-down'}>${text}</span>">
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Rank" width="150" align="center" css-class-all="custom-rating" template-function="createRating"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product">
        <c1-data-map display-member-path="Name" selected-value-path="Name" sort-by-display-values="true">
            <c1-items-source source-collection="products"></c1-items-source>
        </c1-data-map>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" header="End Time" format="hh:mm">
        <c1-flex-grid-cell-template is-editing="true">
            <c1-input-time id="timeEditor" format="hh:mm" step="30"
                           template-bindings="@(new {Value="End"})" is-required="true">
            </c1-input-time>
        </c1-flex-grid-cell-template>
    </c1-flex-grid-column>
    <c1-items-source read-action-url="@Url.Action("ShowCase_Bind")" initial-items-count="@(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue) ? 100 : (int?)null)" query-data="collectingQueryData" update-action-url="@Url.Action("GridShowCaseUpdate")"></c1-items-source>
    <c1-flex-grid-detail detail-visibility-mode="ExpandMulti" is-animated="false">
        <table class="detail-row">
            <tr>
                <td>Size</td>
                <td>: {{ProductDetail.Size}}</td>
            </tr>
            <tr>
                <td>Weight</td>
                <td>: {{ProductDetail.Weight}}</td>
            </tr>
            <tr>
                <td>Quantity</td>
                <td>: {{ProductDetail.Quantity}}</td>
            </tr>
            <tr>
                <td>Description</td>
                <td>: {{ProductDetail.Description}}</td>
            </tr>
        </table>
    </c1-flex-grid-detail>
    <c1-flex-grid-filter default-filter-type="Both">
        <c1-flex-grid-column-filter column="History" filter-type="FilterType.None"/>
    </c1-flex-grid-filter>
</c1-flex-grid>

<c1-flex-grid-search id="theSearch" grid="theFlexGrid" placeholder="@Html.Raw(FlexGridRes.EnterTextSearch_Text0)"></c1-flex-grid-search>

@section Summary{
    <p>@Html.Raw(FlexGridRes.Index_Text0)</p>
}

@section Description{
    @Html.Raw(FlexGridRes.Index_Text1)
}
@section Scripts{

    <script>

        function collectingQueryData(sender, e) {
            if (e.extraRequestData == null) {
                e.extraRequestData = {};
            }

            @foreach (var menuName in optionsModel.Options.Keys.Select(ControlOptions.ToOptionName))
            {
                <text>
                e.extraRequestData["@(menuName)"] = '@(optionsModel.Options[menuName].CurrentValue)';
                </text>
            }
        }

        // #START: TEMPLATE FUNCTION
        function createRating(CellMaker) {
            return CellMaker.makeRating({
                range: [0, 5]
            });
        }

        function createSparkline(CellMaker) {
            return CellMaker.makeSparkline({
                markers: wijmo.grid.cellmaker.SparklineMarkers.High | wijmo.grid.cellmaker.SparklineMarkers.Low
            });
        }
        // #END: TEMPLATE FUNCTION

        c1.documentReady(function () {
            var grid = wijmo.Control.getControl('#theFlexGrid');

            //#START: COLUMNS PICKER
            let theColumnPicker = new wijmo.input.MultiSelectListBox('#theColumnPicker', {
                itemsSource: grid.columns,
                checkedMemberPath: 'visible',
                displayMemberPath: 'header',
                showFilterInput: true,
                showSelectAllCheckbox: true,
                lostFocus: function () { wijmo.hidePopup(theColumnPicker.hostElement) },
                checkedItemsChanged: function (sender) {
                    grid.columns.forEach(function (item) { item.visible = false; });
                    sender.checkedItems.forEach(function (item) {
                        grid.columns.getColumn(item.binding).visible = true;
                    });
                }
            });
            
            // show the column picker when the user clicks the top-left cell
            document.getElementById('column-picker').addEventListener("click", function (e) {
                let host = theColumnPicker.hostElement;
                wijmo.showPopup(host, e.target, false, true, false);
                theColumnPicker.focus();
            });
            //#END: COLUMNS PICKER

            //#START: EXPORT

            //Excel
            document.getElementById("export-excel").addEventListener("click", function () {
                wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid, {
                    scaleMode: wijmo.grid.pdf.ScaleMode.PageWidth,
                    includeColumnHeaders: true,
                    includeCellStyles: false,
                }, 'FlexGrid.xlsx');
            });

            //Pdf
            document.getElementById("export-pdf").addEventListener("click", function () {
                wijmo.grid.pdf.FlexGridPdfConverter.export(grid, 'FlexGrid.pdf', {
                    scaleMode: wijmo.grid.pdf.ScaleMode.PageWidth,
                    documentOptions: {
                        pageSettings: {
                            layout: wijmo.pdf.PdfPageOrientation.Portrait
                        },
                        header: {
                            declarative: {
                                text: '\t&[Page]\\&[Pages]'
                            }
                        },
                        footer: {
                            declarative: {
                                text: '\t&[Page]\\&[Pages]'
                            }
                        }
                    },
                    styles: {
                        cellStyle: {
                            backgroundColor: '#ffffff',
                            borderColor: '#c6c6c6'
                        },
                        altCellStyle: {
                            backgroundColor: '#f9f9f9'
                        },
                        groupCellStyle: {
                            backgroundColor: '#dddddd'
                        },
                        headerCellStyle: {
                            backgroundColor: '#eaeaea'
                        }
                    }
                });
            });

            //csv
            //function for converting CSV string into a downloadable file
            function exportFile(csv, fileName) {
                var fileType = 'txt/csv;charset=utf-8';
                if (navigator.msSaveBlob) { // IE
                    navigator.msSaveBlob(new Blob([csv], {
                        type: fileType
                    }), fileName);
                }
                else {
                    var e = document.createElement('a');
                    e.setAttribute('href', 'data:' + fileType + ',' + encodeURIComponent(csv));
                    e.setAttribute('download', fileName);
                    e.style.display = 'none';
                    document.body.appendChild(e);
                    e.click();
                    document.body.removeChild(e);
                }
            }

            //export grid to CSV
            document.getElementById("export-csv").addEventListener("click", function () {
                var rng = new wijmo.grid.CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1),
                    csv = grid.getClipString(rng, true, true);
                exportFile(csv, 'FlexGrid.csv');
            });
            //#END: EXPORT
        });
    </script>
}