@page "/inputs"
@inject IStringLocalizer<Inputs> Localizer

<h3>Input</h3>

<h4>Enter characters with the mouse or keyboard</h4>

<DemoBlock Title="Basic usage" Introduction="Provides basic text entry components" Name="Normal">
    <p>You can set the <code>IsAutoFocus</code> whether to automatically get focus, and the components that are last executed when multiple text boxes set auto-focus will get focus</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInput PlaceHolder="@PlaceHolderText" TValue="string" IsAutoFocus="true" IsSelectAllTextOnFocus="true" ShowLabel="true" DisplayText="Select all on focus" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput PlaceHolder="@PlaceHolderText" TValue="string" IsSelectAllTextOnEnter="true" ShowLabel="true" DisplayText="Select all on enter" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Color" Introduction="Change the color of the text border by setting <code>Color</code>" Name="Color">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Primary" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Info" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Warning" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Danger" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Secondary" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput TValue="string" Color="Color.Dark" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Keyboard response" Introduction="Using <code>OnEnterAsync</code> <code>OnEscAsync</code> callback delegates to respond to the <kbd>Enter</kbd> <kbd>ESC</kbd> keystrokes" Name="Keyboard">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>Basic usage</span>
        </div>
        <div class="col-6">
            <BootstrapInput TValue="string" PlaceHolder="@PlaceHolderText" OnEnterAsync="OnEnterAsync" OnEscAsync="OnEscAsync" />
        </div>
        <div class="col-12">
            <div>Press the keyboard <kbd>Enter</kbd> or <kbd>Esc</kbd> test</div>
        </div>
    </div>
    <p>Execute @ref.SelectAllTextAsync() method select the all text</p>
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>Basic usage</span>
        </div>
        <div class="col-6">
            <BootstrapInput TValue="string" PlaceHolder="@PlaceHolderText" @ref="Input1" OnEnterAsync="OnEnterSelectAllAsync" />
        </div>
    </div>
    <BlockLogger class="mt-3" @ref="Trace" />
</DemoBlock>

<DemoBlock Title="One-way binding data" Introduction="Displays the value of variables within the component" Name="Placeholder">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>One-way binding</span>
        </div>
        <div class="col-6">
            <BootstrapInput PlaceHolder="@PlaceHolderText" Value="@Model.Name" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Bind data in both directions" Introduction="Binding variables within a component, data is automatically synchronized" Name="Labels">
    <p>when <code>BootstrapInput</code> components turn on bidirectional binding, the <code>Display/DisplayName</code> label value is automatically fetched based on the bound <code>Model</code> property value and appears as a <code>pre-Label</code>, by <code>DisplayText</code> Properties can customize the display of pre-labels, or turn off the display of pre-labels through the <code>ShowLabel</code> property</p>
    <div class="row g-3">
        <Divider Text="Custom labels" />
        <div class="col-12">
            <p>Set the <code>DisplayText</code> value to <b>custom label</b></p>
        </div>
        <div class="col-12">
            <BootstrapInput PlaceHolder="@PlaceHolderText" @bind-Value="@Model.Name" DisplayText="Custom labels" ShowLabel="true" />
        </div>
        <Divider Text="Occupants" />
        <div class="col-12">
            <p>The value of <code>DisplayText</code>  is displayed when <code>ShowLabel</code> is <code>true</code>, regardless of whether the value is set</p>
        </div>
        <div class="col-12">
            <BootstrapInput PlaceHolder="@PlaceHolderText" @bind-Value="@Model.Name" ShowLabel="true" />
        </div>
        <Divider Text="Do not occupy seats" />
        <div class="col-12">
            <p>The value of <code>DisplayText</code> is not displayed when the <code>ShowLabel</code> is <code>false</code></p>
        </div>
        <div class="col-12">
            <BootstrapInput PlaceHolder="@PlaceHolderText" @bind-Value="@Model.Name" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Client valiation" Introduction="Check data validity and prompt automatically based on custom validation rules" Name="ValidateForm">
    <Tips>When using bidirectional binding, you will automatically look for <code>the key</code> value  the resource file with a value of <code>{FieldName}.PlaceHolder</code> the corresponding value as <code>placeholder</code> shows that in this example, the <code>placeholder</code> value is the <code>Name.PlaceHolder</code> key corresponding value in the resource file<code>required</code> non-empty </Tips>
    <ValidateForm Model="@Model">
        <BootstrapInput maxlength="5" @bind-Value="@Model.Name" />
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="The password box" Introduction="By setting the property <code>type</code> value to <code>password</code> the password input box that is blocked by <code>*</code> after entering text" Name="Password">
    <p>In order to support more text box properties this component can be written directly to <code>type='email'</code> <code>type='number'</code> <code>type='phone'</code> and so on<code>html5</code> all property values supported by the new standard, the component does not set the <code>type</code> value using the default <code>type='text'</code></p>
    <BootstrapInput TValue="string" PlaceHolder="@PlaceHolderText" type="password" maxlength="5" style="width: 200px;" />
</DemoBlock>

<DemoBlock Title="Generic binding" Introduction="<code>BootstrapInput</code> component bidirectional binding value is generic, in this case a two-way binding of an int type value" Name="FormatString">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInput FormatString="000" step="1" PlaceHolder="@PlaceHolderText" @bind-Value="@Model.Count" />
        </div>
        <div class="col-12 col-sm-6">
            <div class="col-form-label">The binding value: @Model.Count.ToString("000")</div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Disable" Introduction="When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses input" Name="Disabled">
    <BootstrapInput TValue="string" IsDisabled="true" />
</DemoBlock>

<DemoBlock Title="Custom format" Introduction="When you set the <code>FormatString</code> property value to <code>yyyy-MM-dd</code>, the component displays a time format of the year and day" Name="FormatString">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-form-label">Set up <code class="ms-1">FormatString</code></div>
        <div class="col-12 col-sm-6">
            <BootstrapInput Value="DateTime.Now" FormatString="yyyy-MM-dd" IsDisabled="true" />
        </div>
        <div class="col-12 col-sm-6 col-form-label">Set up <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <BootstrapInput Value="DateTime.Now" Formatter="@DateTimeFormatter" IsDisabled="true" />
        </div>
    </div>
    <p class="mt-3">The <code>BootstrapInput</code> component binds <code>byte[]</code> array and formats it as an example of <code>base64</code> encoded string</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-form-label">Set up <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <BootstrapInput Value="@ByteArray" Formatter="@ByteArrayFormatter" IsDisabled="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="The password box" Introduction="Use the <code>BootstrapPassword</code> component" Name="Password2">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>Basic usage</span>
        </div>
        <div class="col-6">
            <BootstrapPassword PlaceHolder="@PlaceHolderText" IsSelectAllTextOnFocus="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Trim" Introduction="Use <code>IsTrim="true"</code> to automatically trim white space when entering content" Name="Trim">
    <p>The front and back spaces in the component will be trimmed when set <code>IsTrim</code> to <code>true</code></p>
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>Basic usage</span>
        </div>
        <div class="col-6">
            <BootstrapInput @bind-Value="Model.Name" PlaceHolder="@PlaceHolderText" IsTrim="true" />
            <div class="mt-2">123<span>@Model.Name</span>456</div>
        </div>
    </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/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public partial class Inputs
{
    private string? PlaceHolderText { get; set; }

    private byte[] ByteArray { get; set; } = new byte[] { 0x01, 0x12, 0x34, 0x56 };

    private static string ByteArrayFormatter(byte[] source) => Convert.ToBase64String(source);

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

    private static string DateTimeFormatter(DateTime source) => source.ToString("yyyy-MM-dd");

    [NotNull]
    private BlockLogger? Trace { get; set; }

    [NotNull]
    private BootstrapInput<string>? Input1 { get; set; }

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

        PlaceHolderText = Localizer["PlaceHolder"];
        Model = new Foo() { Name = Localizer["TestName"] };
    }

    private Task OnEnterAsync(string val)
    {
        Trace.Log($"Enter {Localizer["Log"]}: {val}");
        return Task.CompletedTask;
    }

    private Task OnEscAsync(string val)
    {
        Trace.Log($"Esc {Localizer["Log"]}: {val}");
        return Task.CompletedTask;
    }

    private async Task OnEnterSelectAllAsync(string val)
    {
        Trace.Log($"Enter call SelectAllText {Localizer["Log"]}: {val}");
        await Input1.SelectAllTextAsync();
    }

    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
        new AttributeItem() {
            Name = "ChildContent",
            Description = Localizer["Att1"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ShowLabel",
            Description = Localizer["Att2"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "DisplayText",
            Description = Localizer["Att3"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Color",
            Description = Localizer["Att4"],
            Type = "Color",
            ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
            DefaultValue = "Primary"
        },
        new AttributeItem() {
            Name = "FormatString",
            Description = Localizer["Att5"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Formatter",
            Description = Localizer["Att6"],
            Type = "RenderFragment<TItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "type",
            Description = Localizer["Att7"],
            Type = "string",
            ValueList = "text / number / email / url / password",
            DefaultValue = "text"
        },
        new AttributeItem() {
            Name = "OnEnterAsync",
            Description = Localizer["Att8"],
            Type = "Func<TValue, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "OnEscAsync",
            Description = Localizer["Att9"],
            Type = "Func<TValue, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "IsDisabled",
            Description = Localizer["Att10"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "IsAutoFocus",
            Description = Localizer["Att11"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = nameof(BootstrapInput<string>.IsSelectAllTextOnFocus),
            Description = Localizer[nameof(BootstrapInput<string>.IsSelectAllTextOnFocus)].Value,
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = nameof(BootstrapInput<string>.IsTrim),
            Description = Localizer[nameof(BootstrapInput<string>.IsTrim)].Value,
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = nameof(BootstrapInput<string>.ValidateRules),
            Description = Localizer[nameof(BootstrapInput<string>.ValidateRules)].Value,
            Type = "List<IValidator>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}