@page "/rates"
@inject IStringLocalizer<Rates> Localizer

<h3>Rate</h3>

<h4>Scoring components</h4>

<DemoBlock Title="Basic usage" Introduction="<code>Rate</code> component represents the numeric level with 1 - 5 stars, and the value can be bound in both directions in the background by <code>bind-Value</code> Through the <code>Rate</code> component changes its value, the mouse swipe changes the value, and confirms its value when you click on the star" Name="Normal">
    <Rate Value="@BindValue" ValueChanged="@OnValueChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Item Template" Introduction="Set <code>ItemTemplate</code> and <code>custom-rate</code> custom the UI" Name="Icon">
    <Pre>.custom-rate {
    --bb-rate-font-size: 1.7rem;
    --bb-rate-height: 30px;
    --bb-rate-width: 30px;
    --bb-rate-active-color: var(--bs-primary);
}</Pre>
    <div class="row">
        <div class="col-12 col-sm-6">
            <Rate @bind-Value="IconListValue" class="custom-rate">
                <ItemTemplate>
                    <i class="@GetIconList(context)"></i>
                </ItemTemplate>
            </Rate>
        </div>
        <div class="col-12 col-sm-6">
            <div class="d-flex align-items-center h-100">
                @GetIconValueChanged()
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Disable" Introduction="Disable components by setting <code>IsDisable</code> property values" Name="Disable">
    <div class="row g-3">
        <div class="col-6">
            <Rate Value="@BindValue1" IsDisable="IsDisable" />
        </div>
        <div class="col-6">
            <Switch @bind-Value="IsDisable" OnText="Disable" OnColor="Color.Danger" OffText="Enable" OffColor="@Color.Success" />
        </div>
    </div>
</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 Rates
{
    private int BindValue { get; set; } = 3;

    private int BindValue1 { get; set; } = 2;

    private bool IsDisable { get; set; }

    private List<string> IconList { get; } = new List<string>()
    {
        "fa-solid fa-face-sad-cry",
        "fa-solid fa-face-sad-tear",
        "fa-solid fa-face-smile",
        "fa-solid fa-face-surprise",
        "fa-solid fa-face-grin-stars"
    };

    private string GetIconList(int index) => IconList[index - 1];

    private int IconListValue { get; set; } = 1;

    private BlockLogger? Trace { get; set; }

    private void OnValueChanged(int val)
    {
        BindValue = val;
        Trace?.Log($"{Localizer["Log"]} {val}");
    }

    private string GetIconValueChanged() => (IconListValue - 1) switch
    {
        0 => Localizer["Cry"],
        1 => Localizer["Tear"],
        2 => Localizer["Smile"],
        3 => Localizer["Surprise"],
        _ => Localizer["Grin"]
    };

    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "ValueChanged",
            Description =Localizer["Event1"],
            Type ="EventCallback<int>"
        }
    };

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "Value",
            Description = Localizer["Att1"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Max",
            Description = Localizer["AttMax"],
            Type = "int",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "IsDisabled",
            Description = Localizer["Att2"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "ItemTemplate",
            Description = Localizer["AttItemTemplate"],
            Type = "RenderFragment<int>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}