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 class Portfolio
    {
        public Portfolio(string name, string currency, params double[] args)
        {
            Name = name;
            Currency = currency;
            YTD = args[0];
            M1 = args[1];
            M6 = args[2];
            M12 = args[3];
            Stock = args[4];
            Bond = args[5];
            Cash = args[6];
            Other = args[7];
            Amount = args[8];
        }

        public string Name;
        public string Currency;
        public double YTD;
        public double M1;
        public double M6;
        public double M12;
        public double Stock;
        public double Bond;
        public double Cash;
        public double Other;
        public double Amount;
    }

    public partial class FlexGridController : Controller
    {
        private static List<Portfolio> _portfolios = new List<Portfolio>
        {
            new Portfolio("Constant Growth", "USD",   0.0523, 0.0142, 0.0443, 0.0743, 0.17, 0.50, 0.18, 0.15, 40500),
            new Portfolio("Optimus Prime",  "EUR",  0.343,  0.430,  0.244,  0.543,  0.33,   0.17,   0.28,   0.22, 100000),
            new Portfolio("Serenity Now",   "YEN",  0.522,  0.143,  0.458,  0.732,  0.15,   0.11,   0.35,   0.39, 255800),
            new Portfolio("Vina Capital",   "VND",  0.418,  0.231,  0.356,  0.648,  0.25,   0.31,   0.19,   0.25, 116900),
            new Portfolio("Dragon Capital",   "BTC",  0.116,  0.528,  0.451,  0.324,  0.15,   0.14,   0.71,   0, 278300)
        };

        public ActionResult ColumnGroups(IFormCollection collection)
        {
            return View(_portfolios);
        }
    }
}

@using C1.Web.Mvc.Grid
@model IEnumerable<MvcExplorer.Controllers.Portfolio>

@{
    const string tpl1 = "<span class=${value> .3 ? 'big-val' : 'small-val'}>${text}</span>";
    const string tpl2 = "<span class=${value > 50000 ? 'big-val' : 'small-val'}>${text}</span>";
}

<c1-flex-grid id="colGroupsFlexGrid" auto-generate-columns="false" class="grid animated" is-read-only="true" sorting-type="None"
              show-marquee="true" default-column-size="113" item-formatter="formatItem">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-grid-column binding="Name" width="130"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Currency" align="center" width="73"></c1-flex-grid-column>
    <c1-flex-grid-column header="Performance" align="center" collapse-to="YTD">
        <c1-flex-grid-column binding="YTD" format="p2" class="main-column"></c1-flex-grid-column>
        <c1-flex-grid-column binding="M1" format="p2"></c1-flex-grid-column>
        <c1-flex-grid-column binding="M6" format="p2"></c1-flex-grid-column>
        <c1-flex-grid-column binding="M12" format="p2"></c1-flex-grid-column>
    </c1-flex-grid-column>
    <c1-flex-grid-column header="Allocation" align="center" collapse-to="Amount">
        <c1-flex-grid-column header="Investment" align="center" collapse-to="Total" is-collapsed="true">
            <c1-flex-grid-column binding="Stock" format="p2" template="@tpl1"></c1-flex-grid-column>
            <c1-flex-grid-column binding="Bond" format="p2" template="@tpl1"></c1-flex-grid-column>
            <c1-flex-grid-column binding="Other" format="p2" template="@tpl1"></c1-flex-grid-column>
            <c1-flex-grid-column binding="Total" name="#Total" format="p2" align="right" class="main-column"></c1-flex-grid-column>
        </c1-flex-grid-column>
        <c1-flex-grid-column binding="Cash" format="p2" template="@tpl1"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Amount" format="c0" class="main-column" template="@tpl2"></c1-flex-grid-column>
    </c1-flex-grid-column>
</c1-flex-grid>

<style type="text/css">
    .wj-flexgrid {
        margin: 10px 0;
    }

        /* highlight the main column in the group */
        .wj-flexgrid .wj-cells .wj-cell.main-column {
            background: #ddffdd;
            color: black;
        }

    /* formatting for cell's templates */
    .big-val {
        font-weight: bold;
        color: darkgreen;
    }

    .small-val {
        font-style: italic;
        color: rgb(202, 0, 0);
    }

    /* animation for collapsing/expanding the groups */
    .wj-flexgrid.animated .wj-colheaders .wj-header.wj-cell.wj-colgroup {
        transition: all .2s;
    }
</style>

@section Scripts{
    <script>
        function formatItem(panel, r, c, cell) {
            if (panel.cellType == 1) {
                switch (panel.columns[c].name) {
                    case '#Total':
                        var item = panel.rows[r].dataItem,
                            value = item.Stock + item.Bond + item.Other,
                            cls = value > .3 ? 'big-val' : 'small-val';
                        txt = wijmo.Globalize.format(value, panel.columns[c].format);
                        cell.innerHTML = '<span class="' + cls + '">' + txt + '</span>'
                        break;
                }
            }
        }
    </script>
}

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

@section Description{
    @Html.Raw(FlexGridRes.ColumnGroups_Text1)
}