@page "/markdowns"
@using Microsoft.Extensions.DependencyInjection
@inject VersionService VersionManager
@inject IStringLocalizer<Markdowns> Localizer

<h3>Markdown</h3>

<h4>A text editor that provides support for the Markdown syntax</h4>

<PackageTips Name="BootstrapBlazor.Markdown" /> 

<h4>CSS file</h4>

<p>dynamic import css</p>

<h4>JS file</h4>

<p>dynamic import javascript</p>

<h4>Localization</h4>

<Tips>The component has a built-in Chinese to switch between current cultural information for Chinese</Tips>

<DemoBlock Title="Common usage" Introduction="The default setting" Name="Normal">
    <p>Once you <code>Markdown</code> code, click on the relevant area below to display the data</p>
    <div style="width: 100%; height: 300px;">
        <Markdown Language="@Language" @bind-Value="@MarkdownString" @bind-Html="@HtmlString" />
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @MarkdownString
        </textarea>
    </div>
    <div class="mt-3">
        <textarea class="form-control" rows="6" disabled="disabled">
            @HtmlString
        </textarea>
    </div>
</DemoBlock>

<DemoBlock Title="Load the data asynchronously" Introduction="Get <code>Markdown</code> display with <code>Webapi</code>" Name="Async">
    <Button Text="load" IsAsync="true" OnClick="GetAsyncString" Icon="fa-solid fa-font-awesome" class="mb-3" />
    <Markdown Value="@AsyncValue" @ref="MarkdownSetValue"></Markdown>
</DemoBlock>

<DemoBlock Title="Common properties" Introduction="Change the default parameters" Name="CommonProperty">
    <p>Set the minimum height of the <code>Markdown</code> Editor <code>300px</code>, the default height <code>500px</code>, indicating that this is the <code>Markdown</code>, <code>tab</code> display, the default display of the WYSIWYG page</p>
    <Markdown Height="500" MinHeight="300" Placeholder="This is Markdown" PreviewStyle="PreviewStyle.Tab" InitialEditType="InitialEditType.Wysiwyg" Language="@Language"></Markdown>
</DemoBlock>

<DemoBlock Title="Browser mode" Introduction="Simple browsing mode, not editable" Name="IsViewer">
    <p>Set the <code>markdown</code> editor to browse-only mode, <code>IsViewer='true'</code></p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
</DemoBlock>

<DemoBlock Title="Dark mode" Introduction="Dark mode" Name="IsDark">
    <Markdown IsDark="true" Value="# Dark Mode"></Markdown>
</DemoBlock>

<DemoBlock Title="Enable the code highlighting plugin" Introduction="Enable plugins with <code>EnableHighlight=true</code>, highlighting using ``` followed by code formatting, and js highlight syntax for example ```js" Name="EnableHighlight">
    <Markdown EnableHighlight="true" Value="@JsString"></Markdown>
</DemoBlock>

<DemoBlock Title="External operation Markdown" Introduction="Using APIs to manipulate the Editor from the outside, the specific API reference <a href='https://nhn.github.io/tui.editor/latest/ToastUIEditorCore'>tui.editor api</a>" Name="Browser">
    <Markdown @ref="Markdown"></Markdown>
    <div class="mt-3">
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", "# test"))">Insert a line of text</Button>
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("insertText", $"![{Localizer["BrowserText"]}](https://i.niupic.com/images/2022/04/01/9Y6T.jpg)"))">Insert a picture</Button>
        <Button OnClickWithoutRender="@(async () => await Markdown.DoMethodAsync("moveCursorToEnd"))">The cursor moves to the end</Button>
    </div>
</DemoBlock>

<DemoBlock Title="Validate" Introduction="Check data validity and prompt automatically based on custom validation rules" Name="Validate">
    <ValidateForm Model="@Model">
        <div class="row g-3 form-inline">
            <div class="col-12">
                <Markdown @bind-Value="Model.Name"></Markdown>
            </div>
            <div class="col-12">
                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="Save" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

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

// 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 System.Globalization;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Markdown 示例代码
/// </summary>
public partial class Markdowns
{
    private string? MarkdownString { get; set; }

    private string? HtmlString { get; set; }

    private string? Language { get; set; }

    private string? AsyncValue { get; set; }

    private string JsString { get; set; } = @"```js
console.log('test');
```";

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

    [NotNull]
    private Markdown? MarkdownSetValue { get; set; }

    [NotNull]
    private Foo? Model { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    /// <returns></returns>
    protected override void OnInitialized()
    {
        Model = new() { Name = "Name", Education = EnumEducation.Primary, DateTime = DateTime.Now };

        Language = CultureInfo.CurrentUICulture.Name;
        MarkdownString = $"### {Localizer["MarkdownString"]}";
    }

    private async Task GetAsyncString()
    {
        await Task.Delay(600);
        AsyncValue = $"### {DateTime.Now}";
        await MarkdownSetValue.SetValue(AsyncValue);
    }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem(){
            Name = "Height",
            Description = Localizer["Att1"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = "300"
        },
        new AttributeItem(){
            Name = "MinHeight",
            Description = Localizer["Att2"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = "200"
        },
        new AttributeItem(){
            Name = "InitialEditType",
            Description = Localizer["Att3"],
            Type = "InitialEditType",
            ValueList = "Markdown/Wysiwyg",
            DefaultValue = "Markdown"
        },
        new AttributeItem(){
            Name = "PreviewStyle",
            Description = Localizer["Att4"],
            Type = "PreviewStyle",
            ValueList = "Tab/Vertical",
            DefaultValue = "Vertical"
        },
        new AttributeItem(){
            Name = "Language",
            Description = Localizer["Att5"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem(){
            Name = "Placeholder",
            Description = Localizer["Att6"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem(){
            Name = "IsViewer",
            Description = Localizer["Att7"],
            Type = "bool",
            ValueList = " true/false ",
            DefaultValue = " false "
        },
        new AttributeItem(){
            Name = "IsDark",
            Description = Localizer["Att8"],
            Type = "bool",
            ValueList = " true/false ",
            DefaultValue = " false "
        },
        new AttributeItem(){
            Name = "EnableHighlight",
            Description = Localizer["Att9"],
            Type = "bool",
            ValueList = " true/false ",
            DefaultValue = " false "
        }
    };
}