@page "/displays"
@inject IStringLocalizer<Displays> Localizer

<h3>Display</h3>

<h4>Displays static text data</h4>

<DemoBlock Title="Basic usage" Introduction="Show only" Name="Normal">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>Basic usage</span>
        </div>
        <div class="col-6">
            <Display TValue="string" Value="@Model.Name" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Bind data in both directions" Introduction="Two-way binding automatically gets the display labels in the resource file" Name="Labels">
    <p>When the <code> Dispaly </code> components turn on bidirectional binding, the <code>Display/DisplayName</code> label value is automatically obtained based on the <code> Model </code> property value of the binding and appears as a <code>pre-Label</code>, with <code>DisplayText</code> properties you can customize the display of the pre-label, or by turning off the display of the pre-label through the <code>ShowLabel</code> property</p>
    <div class="row g-3">
        <div class="col-12">
            <Divider Text="Custom labels" />
        </div>
        <div class="col-12">
            <p>Set the <code> DisplayText </code> value to <b> custom label </b></p>
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Name" DisplayText="Custom labels" ShowLabel="true" />
        </div>
        <div class="col-12">
            <Divider Text="Occupants" />
        </div>
        <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 col-sm-6">
            <Display @bind-Value="@Model.Name" ShowLabel="true" />
        </div>
        <div class="col-12">
            <Divider Text="Do not occupy seats" />
        </div>
        <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 col-sm-6">
            <Display @bind-Value="@Model.Name" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Generic binding" Introduction="The <code> Display </code> component has built-in processing of <code> enumerated </code> <code> collections </code> <code> array </code>, customize formatting or callback delegate methods if they do not meet the criteria" Name="DataType">
    <div class="row g-3">
        <div class="col-12 col-sm-6">Integer
            <Display FormatString="000" @bind-Value="@Model.Count" ShowLabel="true" DisplayText="Integer" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="Enumerate" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Hobby" ShowLabel="true" DisplayText="Collection" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@ByteArray" ShowLabel="true" DisplayText="Array" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@DateTime.Now" ShowLabel="true" DisplayText="DateTime" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@DateTimeOffset.Now" ShowLabel="true" DisplayText="DateTimeOffset" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Used within the form" Introduction="The <code> Dispaly </code> component is used in form components <code> EditorForm </code>, and is used in detail pages and is not editable" Name="EditorForm">
    <EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
        <FieldItems>
            <EditorItem @bind-Field="@Model.Hobby" Items="@Hobbys" />
        </FieldItems>
    </EditorForm>
</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">Set up <code class="ms-1">FormatString</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="DateTime.Now" FormatString="yyyy-MM-dd" />
        </div>
        <div class="col-12 col-sm-6">Set up <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="DateTime.Now" FormatterAsync="@DateTimeFormatter" />
        </div>
    </div>
    <p class="mt-3">The <code> Dispaly </code> component binding <code> byte[] </code> array, formatted as an example of <code> base64 </code> encoded string</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">Set up <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="@ByteArray" FormatterAsync="@ByteArrayFormatter" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Automatically translated into Text" Introduction="Set the <code>Lookup </code> value to <code>IEnumerable<SelectedItem></code> collection, through which the component will perform translations through the <code>Value </code> display <code>Text </code>" Name="Lookup">
    <p>
        <div>In this example, the component <code>Value='@IntValue'</code> set <code>Lookup='@IntValueSource'</code> component to display the <code>Text </code> corresponding to the value of the </code> <code> Value</div>
        <div><b>InitValue</b>: 1,2,3</div>
        <div><b>IntValueSource</b>: Text1,Text2,Text3</div>
    </p>
    <Display Value="@IntValue" Lookup="@IntValueSource" />
</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;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Display 组件示例
/// </summary>
public partial class Displays
{
    [NotNull]
    private Foo? Model { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? FooLocalizer { get; set; }

    [NotNull]
    private IEnumerable<SelectedItem>? Hobbys { get; set; }

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

    private IEnumerable<int> IntValue { get; set; } = new[] { 1, 2, 3 };

    private IEnumerable<SelectedItem> IntValueSource { get; set; } = new[]
    {
            new SelectedItem("1", "Text1"),
            new SelectedItem("2", "Text2"),
            new SelectedItem("3", "Text3")
        };

    private static async Task<string> ByteArrayFormatter(byte[] source)
    {
        await Task.Delay(10);
        return Convert.ToBase64String(source);
    }

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

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

        Model = Foo.Generate(FooLocalizer);
        Model.Hobby = Foo.GenerateHobbys(FooLocalizer).Take(3).Select(i => i.Text);
        Hobbys = Foo.GenerateHobbys(FooLocalizer);
    }

    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
            new AttributeItem() {
                Name = "ShowLabel",
                Description = Localizer["ShowLabel"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = Localizer["DisplayText"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FormatString",
                Description = Localizer["FormatString"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Formatter",
                Description = Localizer["Formatter"],
                Type = "RenderFragment<TItem>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
}