@page "/colorpickers"
@inject IStringLocalizer<ColorPickers> Localizer

<h3>ColorPicker Color Picker</h3>

<h4>Select color to use</h4>

<DemoBlock Title="Basic Usage" Introduction="Set the color value by setting the <code>Value</code> property" Name="Normal">
    <ColorPicker Value="@Value1" OnValueChanged="@OnColorChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Set Initial Value" Introduction="Set the color value by setting the <code>Value</code> property" Name="Value">
    <p>Set <code>Value='@Value2'</code> to initialize the default value</p>
    <ColorPicker Value="@Value2" />
</DemoBlock>

<DemoBlock Title="Two-way binding" Introduction="Set the color value by setting the <code>Value</code> property" Name="BindValue">
    <ColorPicker @bind-Value="@Value3" />
    <div class="mt-3">Value3: @Value3</div>
</DemoBlock>

<DemoBlock Title="Disabled" Introduction="Disable this component by setting the <code>IsDisabled</code> property" Name="Disabled">
    <ColorPicker Value="@Value5" IsDisabled="true" />
</DemoBlock>

<DemoBlock Title="Used in the verification form" Introduction="Built in <code>ValidateForm</code> to use" Name="ValidateForm">
    <ValidateForm Model="Dummy">
        <div class="row g-3 form-inline">
            <div class="col-6">
                <ColorPicker @bind-Value="@Dummy.Name" />
            </div>
        </div>
    </ValidateForm>
</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.Shared.Common;
using BootstrapBlazor.Shared.Components;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public partial class ColorPickers
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private string? Value1 { get; set; }

    private string Value2 { get; set; } = "#FFFFFF";

    private string Value3 { get; set; } = "#DDDDDD";

    private string? Value5 { get; set; }

    [NotNull]
    private Foo? Dummy { get; set; } = new Foo() { Name = "#dddddd" };

    private Task OnColorChanged(string color)
    {
        Trace.Log($"Selected color: {color}");
        return Task.CompletedTask;
    }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            new AttributeItem()
            {
                Name = "OnValueChanged",
                Description = Localizer["Event1"],
                Type = "Func<string, Task>",
                ValueList = "",
                DefaultValue = ""
            }
    };
}