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

namespace MvcExplorer.Controllers
{
    public partial class InputColorController : Controller
    {
        private readonly ControlOptions _optionModel = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Show Color String",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}}
            }
        };

        public ActionResult Index(IFormCollection collection)
        {
            _optionModel.LoadPostData(collection);
            ViewBag.DemoOptions = _optionModel;
            return View();
        }
    }
}

@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
}

@section Scripts{
    <style>
        .invalid-tooltip {
            background-color: red;
            color: yellow;
            opacity: 0.9;
            border-color: lightcoral;
        }
    </style>

    <script>
        var _invalidTooltip;
        c1.documentReady(function () {
            _invalidTooltip = new wijmo.Tooltip();
            _invalidTooltip.cssClass = 'invalid-tooltip';
            _invalidTooltip.position = 11;
            window.addEventListener('resize', function () {
                if (_invalidTooltip.isVisible) {
                    _invalidTooltip.hide();
                    onInvalidInput();
                }
            });
        })

        function onInvalidInput(input, e) {
            e && (e.cancel = true);
            _invalidTooltip.show("#invalidInput", "@Html.Raw(InputColorRes.Index_Text2)");
        }

        function onValueChanged(input, e) {
            _invalidTooltip && _invalidTooltip.hide();
            changeColor(input, e);
        }

        function changeColor(sender, e) {
            document.getElementById("image1").style.backgroundColor = sender.value;
        }
    </script>
}

<p>
  <img id="image1" src="@Href("~/Content/images/room.png")" />
</p>

<div>
    <label>@Html.Raw(InputColorRes.Index_Text0)</label>
    <c1-input-color id="invalidInput" value="White" click-action="Toggle" invalid-input="onInvalidInput" value-changed="onValueChanged"
        show-color-string="@Convert.ToBoolean(optionsModel.Options["Show Color String"].CurrentValue)"></c1-input-color>
</div>

@section Settings{
    @await Html.PartialAsync("_OptionsMenu", optionsModel)
}

@section Description{
    @Html.Raw(InputColorRes.Index_Text1)
}