using System.Collections.Generic;
using FinancialChartExplorer.Models;
using Microsoft.AspNetCore.Mvc;

namespace FinancialChartExplorer.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult Markers()
        {
            var model = BoxData.GetDataFromJson().GetRange(0, 20);
            ViewBag.DemoSettingsModel = new ClientSettingsModel() { Settings = CreateMarkersSettings() };
            return View(model);
        }

        private static IDictionary<string, object[]> CreateMarkersSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"Alignment", new object[]{"Auto","Bottom","Left","Right","Top"}},
                {"Interaction", new object[]{"Move","Drag","None"}},
                {"Lines", new object[]{"Both","Horizontal","Vertical","None"}},
            };

            return settings;
        }

    }
}

@model List<FinanceData>
@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}

<script type="text/javascript">
    function customChangeAlignment(control, value) {
        var marker = getLineMarker(control);
        if (marker) {
            marker.alignment = wijmo.chart.LineMarkerAlignment[value];
        }
    }

    function customChangeInteraction(control, value) {
        var marker = getLineMarker(control);
        if (marker) {
            marker.interaction = wijmo.chart.LineMarkerInteraction[value];
        }
    }

    function customChangeLines(control, value) {
        var marker = getLineMarker(control);
        if (marker) {
            marker.lines = wijmo.chart.LineMarkerLines[value];
        }
    }

    function lineMarkerContent(ht, pt) {
        var item = ht.series.collectionView.items[ht.pointIndex];
        if (item) {
            return 'Date: ' + wijmo.Globalize.format(ht.x, 'MMM-dd') + '<br/>' +
                                'High: ' + item.High.toFixed() + '<br/>' +
                                'Low: ' + item.Low.toFixed() + '<br/>' +
                                'Open: ' + item.Open.toFixed() + '<br/>' +
                                'Close: ' + item.Close.toFixed() + '<br/>' +
                                'Volume: ' + item.Volume.toFixed();
        }
    }

    function getLineMarker(control) {
        return c1.getExtender(control, 'LineMarker');
    }
</script>

<c1-financial-chart id="@demoSettingsModel.ControlId" binding-x="X" chart-type="Candlestick">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-financial-chart-series binding="High,Low,Open,Close,Volume" name="BOX"></c1-financial-chart-series>
    <c1-flex-chart-tooltip content=""></c1-flex-chart-tooltip>
    <c1-line-marker id="LineMarker" alignment="Auto" lines="Both" drag-content="true" interaction="Move" content="lineMarkerContent"></c1-line-marker>
</c1-financial-chart>

@section Description{
    <p>@Html.Raw(Home.Markers_Text0)</p>
    <p>@Html.Raw(Home.Markers_Text1)</p>
}
@section Summary{
    <p>@Html.Raw(Home.Markers_Text2)</p>
}