@page "/editors"
@inject SwalService SwalService
@inject VersionService VersionManager
@inject IStringLocalizer<Editors> Localizer

<h3>Editor</h3>

<h4>Convert the entered text into <code>html</code> code snippets</h4>

<p>The <code>Editor</code> component is a secondary package of <a href='https://summernote.org/' target='_blank'><code>Summernote component</code></a>, such as If you need to use the localization function, please download the corresponding language pack from the official website and quote it by yourself. <code>zh-CN</code> <code>en-US</code> has been built in；the required <code>css</code> <code>javascript</code> dynamically loaded on demand</p>

<div class="code-label">.NET CLI</div>
<Pre class="no-highlight">dotnet add package BootstrapBlazor.SummerNote --version @Version</Pre>

<div class="code-label">PackageReference</div>
<Pre class="no-highlight"><PackageReference Include="BootstrapBlazor.SummerNote" Version="@Version" /></Pre>

<div class="code-label">Package Manager</div>
<Pre class="no-highlight">Install-Package BootstrapBlazor.SummerNote -Version @Version</Pre>

<DemoBlock Title="Basic usage" Introduction="The default rendering is <code>div</code> and it becomes a rich text edit box when clicked" Name="Normal">
    <p>Set the <code>IsEditor</code> attribute value to control whether the component defaults to <code>div</code> or <code>editor</code></p>
    <div class="form-control mb-3">I am a normal <code>div</code> click and can’t edit</div>
    <Editor></Editor>
</DemoBlock>

<DemoBlock Title="Custom prompt message" Introduction="The prompt message when a null value is set by setting the <code>Placeholder</code> attribute" Name="Placeholder">
    <p>The default prompt is <b>Edit after clicking</b></p>
    <Editor PlaceHolder="Customize the prompt message for empty values"></Editor>
</DemoBlock>

<DemoBlock Title="Display as a rich text edit box by default" Introduction="Set the component to be directly displayed as a rich text edit box by setting the <code>IsEditor</code> property" Name="IsEditor">
    <Editor IsEditor="true"></Editor>
</DemoBlock>

<DemoBlock Title="Custom height" Introduction="Set the height of the component by setting the <code>Height</code> property" Name="Height">
    <Editor IsEditor="true" Height="400"></Editor>
</DemoBlock>

<DemoBlock Title="Two-way binding" Introduction="In actual combat, two-way binding to <code>Value</code> automatically obtains the editing content of the client's rich text box in the background" Name="OnValueChanged">
    <p>Use <code>bind-Value</code> to bind the backend properties of <code>EditorValue</code> in two ways. After editing in the edit box, click the <b>Finish</b> button, and then enter the text box below. Show edited result</p>
    <Editor @bind-Value="@EditorValue" OnValueChanged="@OnValueChanged"></Editor>

    <label class="form-label mt-3">Show edit content:</label>
    <textarea class="form-control mt-3">@EditorValue</textarea>
    <div class="mt-3">
        <Button OnClick="SetValue">Reset</Button>
    </div>
</DemoBlock>

<DemoBlock Title="Customize the extended edit box button" Introduction="Customize the extension of the edit box toolbar by setting the <code>CustomerPluginItems</code> property, and do the function by setting the <code>OnClickPluginItem</code> callback delegate" Name="CustomerToolbarButtons">
    <p>In this example, two buttons are added to the toolbar by extending the <code>CustomerPluginItems</code> property. Click the button to pop up the <code>SweetAlert</code> modal box, click the modal box confirmation button and insert the text box A piece of content</p>
    <Editor IsEditor="true" OnClickButton="@PluginClick" CustomerToolbarButtons="@EditorPluginItems"></Editor>
</DemoBlock>

<DemoBlock Title="Customize the rich text edit box of the toolbar" Introduction="Customize the toolbar content by setting the <code>ToolbarItems</code> property. For the currently supported toolbar values, please refer to <a href='https://summernote.org/' target='_blank'>Summernote</a> Official website" Name="ToolbarItems">
    <p>In this example, by setting the <code>ToolbarItems</code> property, the default available toolbar buttons are changed</p>
    <Editor IsEditor="true" ToolbarItems="@ToolbarItems"></Editor>
</DemoBlock>

<DemoBlock Title="Instance Method" Introduction="Call the instance method, please refer <a href='https://summernote.org/deep-dive'>summernote api</a>" Name="DoMethodAsync">
    <p>In this example, by setting the <code>ToolbarItems</code> property, the default available toolbar buttons are changed</p>
    <Editor IsEditor="true" @ref="Editor"></Editor>
    <div class="mt-3">
        <Button OnClick="InsertHtmlAsync">Insert Html</Button>
        <Button OnClick="@(() => Editor.DoMethodAysnc("formatH2", ""))">Update to  H2</Button>
        <Button OnClick="@(() => Editor.DoMethodAysnc("insertImage", "https://www.blazor.zone/_content/BootstrapBlazor.Shared/images/avatars/150-1.jpg", "tree"))">Insert Image</Button>
    </div>
</DemoBlock>

<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;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Editors
{
    /// <summary>
    /// 获得/设置 版本号字符串
    /// </summary>
    private string Version { get; set; } = "fetching";

    private string? EditorValue { get; set; }

    [NotNull]
    private Editor? Editor { get; set; }

    /// <summary>
    /// OnInitializedAsync 方法
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        Version = await VersionManager.GetVersionAsync("bootstrapblazor.summernote");
    }

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

    private void SetValue()
    {
        EditorValue = Localizer["UpdateValue"];
    }

    private async Task InsertHtmlAsync()
    {
        await Editor.DoMethodAysnc("pasteHTML", "<h1>这里是外部按钮插入的内容</h1>");
    }

    private List<EditorToolbarButton>? EditorPluginItems { get; set; }

    private async Task<string?> PluginClick(string pluginItemName)
    {
        var ret = "";
        if (pluginItemName == "plugin1")
        {
            var op = new SwalOption()
            {
                Title = Localizer["SwalTitle"],
                Content = Localizer["SwalContent"]
            };
            if (await SwalService.ShowModal(op))
            {
                ret = Localizer["Ret1"];
            }
        }
        if (pluginItemName == "plugin2")
        {
            var op = new SwalOption()
            {
                Title = Localizer["Swal2Title"],
                Content = Localizer["Swal2Content"]
            };
            if (await SwalService.ShowModal(op))
            {
                ret = Localizer["Ret2"];
            }
        }
        return ret;
    }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        EditorValue = Localizer["InitValue"];
        EditorPluginItems = new List<EditorToolbarButton>()
        {
            new EditorToolbarButton()
            {
                IconClass = "fa fa-pencil",
                ButtonName = "plugin1",
                Tooltip = Localizer["ToolTip1"]
            },
            new EditorToolbarButton()
            {
                IconClass = "fa fa-home",
                ButtonName = "plugin2",
                Tooltip = Localizer["ToolTip2"]
            }
        };
    }

    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 = Localizer["Att1"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = Localizer["Att1DefaultValue"]!
            },
            new AttributeItem() {
                Name = "IsEditor",
                Description = Localizer["Att2"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Height",
                Description = Localizer["Att3"],
                Type = "int",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "ToolbarItems",
                Description = Localizer["Att4"],
                Type = "IEnumerable<object>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "CustomerToolbarButtons",
                Description = Localizer["Att5"],
                Type = "IEnumerable<EditorToolbarButton>",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}