@page "/editors"
@inject SwalService SwalService

<h3>Editor 富文本框</h3>

<h4>将输入的文字转化为 <code>html</code> 代码片段</h4>

<p><code>Editor</code> 组件是对 <a href="https://summernote.org/" target="_blank"><code>Summernote 组件</code></a> 的二次封装，如需使用本地化功能请自行官网下载相对应语言包，自行引用即可</p>

<Block Title="基础用法" Introduction="默认呈现为 <code>div</code> 点击后变为富文本编辑框">
    <p>通过设置 <code>IsEditor</code> 属性值来控制组件默认是 <code>div</code> 还是 <code>editor</code></p>
    <div class="form-control mb-3">我是一个普通的 <code>div</code> 点击无法编辑</div>
    <Editor></Editor>
</Block>

<Block Title="自定义提示信息" Introduction="通过设置 <code>Placeholder</code> 属性来设置空值时的提示消息">
    <p>默认提示是 <b>点击后进行编辑</b></p>
    <Editor Placeholder="自定义空值的提示信息"></Editor>
</Block>

<Block Title="默认显示为富文本编辑框" Introduction="通过设置 <code>IsEditor</code> 属性来设置组件直接显示为富文本编辑框">
    <Editor IsEditor="true"></Editor>
</Block>

<Block Title="自定义高度" Introduction="通过设置 <code>Height</code> 属性来设置组件高度">
    <Editor IsEditor="true" Height="400"></Editor>
</Block>

<Block Title="双向绑定" Introduction="实战中通过双向绑定到 <code>Value</code> 后台自动获取到客户端富文本框编辑内容">
    <p>通过 <code>bind-Value</code> 对 <code>EditorValue</code> 后台属性进行双向绑定，编辑框内进行编辑后点击 <b>完成</b> 按钮，下方文本框内即可显示编辑后结果</p>
    <Editor @bind-Value="@EditorValue" OnValueChanged="@OnValueChanged"></Editor>

    <label class="form-label mt-3">显示编辑内容：</label>
    <textarea class="form-control mt-3">@EditorValue</textarea>
    <div class="mt-3">
        <Button OnClick="SetValue">Reset</Button>
    </div>
</Block>

<Block Title="自定义扩展编辑框按钮" Introduction="通过设置 <code>CustomerPluginItems</code> 属性对编辑框工具栏进行自定义扩展， 通过设置 <code>OnClickPluginItem</code> 回调委托做功能">
    <p>本例中通过扩展 <code>CustomerPluginItems</code> 属性在工具栏中增加了两个按钮，点击按钮弹出 <code>SweetAlert</code> 模态框，点击模态框确认按钮后文本框中插入一段内容</p>
    <Editor IsEditor="true" OnClickButton="@PluginClick" CustomerToolbarButtons="@EditorPluginItems"></Editor>
</Block>

<Block Title="自定义工具栏的富文本编辑框" Introduction="通过设置 <code>ToolbarItems</code> 属性自定义工具栏内容，目前支持的工具栏值请参见 <a href='https://summernote.org/' target='_blank'>Summernote</a> 官网">
    <p>本例中通过设置 <code>ToolbarItems</code> 属性，更改默认可用的工具栏按钮</p>
    <Editor IsEditor="true" ToolbarItems="@ToolbarItems"></Editor>
</Block>

<SweetAlert />

<AttributeTable Items="@GetAttributes()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Editors
    {
        private string EditorValue { get; set; } = "初始值 <b>Test</b>";

        private Task OnValueChanged(string val)
        {
            EditorValue = val;
            return Task.CompletedTask;
        }

        private void SetValue()
        {
            EditorValue = "更改后的值";
        }

        private List<EditorToolbarButton> EditorPluginItems { get; } = new List<EditorToolbarButton>()
        {
            new EditorToolbarButton()
            {
                IconClass = "fa fa-pencil",
                ButtonName = "plugin1",
                Tooltip = "这是 plugin1 的提示"
            },
            new EditorToolbarButton()
            {
                IconClass = "fa fa-home",
                ButtonName = "plugin2",
                Tooltip = "这是 plugin2 提示"
            }
        };

        private async Task<string> PluginClick(string pluginItemName)
        {
            var ret = "";
            if (pluginItemName == "plugin1")
            {
                var op = new SwalOption()
                {
                    Title = "点击plugin1按钮后弹窗",
                    Content = "点击插件按钮后弹窗并确认后才进行下一步处理",
                    IsConfirm = true
                };
                if (await SwalService.ShowModal(op))
                {
                    ret = "<div class='text-danger'>从plugin1返回的数据</div>";
                }
            }
            if (pluginItemName == "plugin2")
            {
                var op = new SwalOption()
                {
                    Title = "点击plugin2按钮后弹窗",
                    Content = "点击插件按钮后弹窗并确认后才进行下一步处理",
                    IsConfirm = true
                };
                if (await SwalService.ShowModal(op))
                {
                    ret = "从plugin2返回的数据";
                }
            }
            return ret;
        }

        private List<object> ToolbarItems { get; } = new List<object>
        {
            new List<object> {"style", new List<string>() {"style"}},
            new List<object> {"font", new List<string>() {"bold", "underline", "clear"}}
        };

        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Placeholder",
                Description = "空值时的提示信息",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "点击后进行编辑"
            },
            new AttributeItem() {
                Name = "IsEditor",
                Description = "是否直接显示为富文本编辑框",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Height",
                Description = "组件高度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "ToolbarItems",
                Description = "富文本框工具栏工具",
                Type = "IEnumerable<object>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "CustomerToolbarButtons",
                Description = "自定义按钮",
                Type = "IEnumerable<EditorToolbarButton>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}