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

namespace MvcExplorer.Controllers
{
    public partial class FlexChartController : Controller
    {
        public ActionResult Tooltips()
        {
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = new Dictionary<string, object[]>
                {
                    {"Style", new object[]{
                        "green-white-tooltip",
                        "red-yellow-tooltip",
                        "gradient-tooltip",
                        "text-style-tooltip",
                        "strong-round-tooltip",
                        "default-tooltip"
                    } }
                }
            };

            return View(Fruit.GetFruitsSales());
        }
    }
}

@model IEnumerable<Fruit>

@{
    ViewBag.DemoSettings = true;
    var palete = new List<string>() {
            "Orange",
            "LightGreen"
        };
}

@section Scripts{
    <script>
        var chart;

        c1.documentReady(function () {
            chart = wijmo.Control.getControl('#chartDemo');
        });

        function customChangeStyle(control, value) {
            chart.tooltip.cssClass = value;
        }
    </script>
}

<style>

    .green-white-tooltip {
        background-color: green;
        color: white;
    }

    .red-yellow-tooltip {
        background-color: red;
        color: yellow;
    }

    .gradient-tooltip {
        background-color: greenyellow;
        background-image: radial-gradient(circle at top right, yellow, #f06d06 50%);
        color: black;
    }

    .text-style-tooltip {
        background-color: lightyellow;
        color: black;
        font-style: oblique;
        text-shadow: 2px 2px 5px green;
    }

    .strong-round-tooltip {
        background-color: palegreen;
        color: black;
        border-radius: 20%;
    }
</style>

<c1-flex-chart id="chartDemo" binding-x="Name" chart-type="Bar" legend-position="None" palette="@palete">
    <c1-flex-chart-datalabel content="{y}" />
    <c1-items-source source-collection="Model" />
    <c1-flex-chart-series name="March" binding="MarPrice"></c1-flex-chart-series>
    <c1-flex-chart-series name="April" binding="AprPrice"></c1-flex-chart-series>
    <c1-flex-chart-tooltip class="green-white-tooltip"></c1-flex-chart-tooltip>
</c1-flex-chart>


@section Summary{
    @Html.Raw(FlexChartRes.Tooltips_Text0)
}

@section Description{
    <p>@Html.Raw(FlexChartRes.Tooltips_Text1)</p>
    <pre>
    .green-white-tooltip {
        background-color: green;
        color: white;
    }

    .red-yellow-tooltip {
        background-color: red;
        color: yellow;
    }

    .gradient-tooltip {
        background-color: greenyellow;
        background-image: radial-gradient(circle at top right, yellow, #f06d06 50%);
        color: black;
    }

    .text-style-tooltip {
        background-color: lightyellow;
        color: black;
        font-style: oblique;
        text-shadow: 2px 2px 5px green;
    }

    .strong-round-tooltip {
        background-color: palegreen;
        color: black;
        border-radius: 20%;
    }
    </pre>
}