@page "/radios"
@inject IStringLocalizer<Radios> Localizer

<h3>Radio</h3>

<h4>Single in a set of alternatives</h4>

<DemoBlock Title="Basic usage" Introduction="Basic usage" Name="Normal">
    <RadioList TValue="string" Items="@DemoValues" OnSelectedChanged="@OnSelectedChanged"></RadioList>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Turn off the radio box" Introduction='The unavailable status of the radio box is <code>IsDisabled='true'</code>' Name="Disable">
    <RadioList TValue="string" Items="@DemoValues" IsDisabled="true" ShowBorder="false"></RadioList>
</DemoBlock>

<DemoBlock Title="Label text" Introduction="The radio box displays text" Name="Label">
    <RadioList TValue="string" Items="@DemoValues" ShowLabel="true" DisplayText="Button group"></RadioList>
</DemoBlock>

<DemoBlock Title="Bind data in both directions" Introduction="Binding variables within a component, data automatically synchronized, binding an array of selectedItem types" Name="Binding">
    <div class="row g-3">
        <div class="col-12">
            <RadioList Items="@Items" @bind-Value="@BindRadioItem" OnSelectedChanged="@OnItemChanged"></RadioList>
        </div>
        <div class="col-12">
            Text: @BindRadioItem.Text Value: @BindRadioItem.Value
        </div>
    </div>
    <BlockLogger class="mt-3" @ref="BinderLog" />
</DemoBlock>

<DemoBlock Title="Vertical arrangement" Introduction="Make the components vertically arranged internally by setting the <code>IsVertical</code>" Name="Vertical">
    <RadioList TValue="string" Items="@DemoValues" IsVertical="true"></RadioList>
</DemoBlock>

<DemoBlock Title="The binding enumeration type" Introduction="You do not need to set up <code>Items</code> <code>Value</code> by binding both directions" Name="Enum">
    <RadioList @bind-Value="@SelectedEnumItem"></RadioList>
    <p class="mt-2">@SelectedEnumItem</p>
    <p>By setting the <code>IsAutoAddNullItem</code> automatically adds the <b>empty value</b>option, and by setting the <code>NullItemText</code> the custom <b>null</b>option</p>
    <RadioList @bind-Value="@SelectedEnumItem2" IsAutoAddNullItem="true" NullItemText="null"></RadioList>
</DemoBlock>

<DemoBlock Title="ItemTemplate" Introduction="Set <code>ItemTemplate</code> for customer the item UI" Name="ItemTemplate">
    <RadioList TValue="string" Items="@IconDemoValues" IsVertical="true">
        <ItemTemplate>
            @if (context is IconSelectedItem item)
            {
                <div>
                    <i class="@item.Icon"></i>
                    <span>@item.Text</span>
                </div>
            }
        </ItemTemplate>
    </RadioList>
</DemoBlock>

<DemoBlock Title="Color" Introduction="Change the component background color by setting the <code>Color</code> property" Name="Color">
    <div class="row g-3">
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Primary"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Success"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Danger"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Info"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Warning"></RadioList>
        </div>
        <div class="col-12">
            <RadioList TValue="string" Items="@DemoValues" Color="@Color.Secondary"></RadioList>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Button Radio" Introduction="Set <code>IsButton</code> to <code>True</code> make the radio item display as Button" Name="IsButton">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" IsDisabled="true" Color="Color.Danger"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" Color="Color.Success" ShowLabel="true" DisplayText="Test"></RadioList>
        </div>
        <div class="col-12 col-sm-6">
            <RadioList IsButton="true" @bind-Value="@SelectedEnumItem" Color="Color.Info" ShowLabel="true" DisplayText="Test"></RadioList>
        </div>
    </div>

    <ValidateForm Model="Model" class="mt-3">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <RadioList @bind-Value="@Model.Complete" IsButton="true" Items="FooItems" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

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

<EventTable Items="@GetEvents()" />

// 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 sealed partial class Radios
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

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

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

    [NotNull]
    private IEnumerable<IconSelectedItem>? IconDemoValues { get; set; }

    private Task OnSelectedChanged(IEnumerable<SelectedItem> values, string val)
    {
        var value = values.FirstOrDefault();
        Trace.Log($"{Localizer["Log1"]} {value?.Value}  {Localizer["Log1"]}{value?.Text}  {Localizer["Log3"]}{val}");
        return Task.CompletedTask;
    }

    private Task OnItemChanged(IEnumerable<SelectedItem> values, SelectedItem val)
    {
        var value = values.FirstOrDefault();
        BinderLog.Log($"{Localizer["Log1"]} {value?.Value} {Localizer["Log1"]} {value?.Text}");
        return Task.CompletedTask;
    }

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

    private SelectedItem BindRadioItem { get; set; } = new SelectedItem();

    [NotNull]
    private EnumEducation? SelectedEnumItem { get; set; }

    [NotNull]
    private EnumEducation? SelectedEnumItem2 { get; set; }

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

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

    [NotNull]
    private List<SelectedItem>? FooItems { get; set; }

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

        DemoValues = new List<SelectedItem>(2)
        {
            new SelectedItem("1", Localizer["Item1"]),
            new SelectedItem("2", Localizer["Item2"]),
        };
        Items = new SelectedItem[]
        {
            new SelectedItem("1", Localizer["Add1"]) { Active = true },
            new SelectedItem("2", Localizer["Add2"])
        };
        Model = Foo.Generate(LocalizerFoo);
        FooItems = Foo.GetCompleteItems(LocalizerFoo);

        IconDemoValues = new List<IconSelectedItem>()
        {
            new IconSelectedItem() { Text = "Item1", Value = "1", Icon = "fa-solid fa-users" },
            new IconSelectedItem() { Text = "Item2", Value = "2", Icon = "fa-solid fa-users-gear" }
        };
    }

    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
        new AttributeItem() {
            Name = "DisplayText",
            Description = Localizer["Att1"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "—"
        },
        new AttributeItem() {
            Name = "GroupName",
            Description = Localizer["GroupName"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "—"
        },
        new AttributeItem() {
            Name = "NullItemText",
            Description = Localizer["Att2"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = "—"
        },
        new AttributeItem() {
            Name = "IsDisabled",
            Description = Localizer["Att3"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsVertical",
            Description = Localizer["Att4"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(RadioList<string>.IsButton),
            Description = Localizer["IsButton"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsAutoAddNullItem",
            Description = Localizer["Att5"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Items",
            Description = Localizer["Att6"],
            Type = "IEnumerable<TItem>",
            ValueList = " — ",
            DefaultValue = "—"
        }
    };

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "OnSelectedChanged",
            Description = Localizer["Event1"],
            Type ="Func<IEnumerable<SelectedItem>, TValue, Task>"
        }
    };

    class IconSelectedItem : SelectedItem
    {
        public string? Icon { get; set; }
    }
}