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

<p><b>Precautions ：</b></p>

<p>This component relies on <a href='https://www.nuget.org/packages?q-BootstrapBlazor.Markdown' target'_blank'><code>BootstrapBlazor.Markdown</code></a>, which needs to reference its component package when using this component</p>

<p><b>Nuget package installation</b></p>

<p>Install the</code> components of <code>BootstrapBlazor.Markdown using <a href='https://www.nuget.org/packages?q-BootstrapBlazor.Markdown' target'_blank'>nuget.org</a></p>

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

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

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

<h4>CSS file</h4>

<Pre><link rel="stylesheet" href="_content/BootstrapBlazor.Markdown/css/bootstrap.blazor.markdown.min.css" /></Pre>

<h4>JS file</h4>

<Pre><script src="_content/BootstrapBlazor.Markdown/js/bootstrap.blazor.markdown.min.js"></script></Pre>

<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 fa-fa" />
    <Markdown @bind-Value="@AsyncValue"></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="Browser">
    <p>Set the <code>markdown</code> editor to browse-only mode, <code>IsViewer='true'</code></p>
    <Markdown IsViewer="true" Value="# Viewer Mode"></Markdown>
</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 BootstrapBlazor.Shared.Common;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

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

    private string? HtmlString { get; set; }

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

    private string? Language { get; set; }

    private string? AsyncValue { get; set; }

    /// <summary>
    /// OnInitializedAsync 方法
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        Language = CultureInfo.CurrentUICulture.Name;
        MarkdownString = $"### {Localizer["MarkdownString"]}";
        Version = await VersionManager.GetVersionAsync("bootstrapblazor.markdown");
    }

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

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