@namespace LumexUI.Docs.Client.Components
@rendermode InteractiveWebAssembly

@foreach( var swatch in _swatches )
{
    <div class="@(swatch.Title == "Base" ? "order-last sm:order-none" : default)">
        <div class="font-semibold text-sm text-foreground-900">@swatch.Title</div>
        <div class="grid grid-cols-1 sm:grid-cols-11 mt-3 gap-2.5 sm:mt-2">
            @foreach( var color in swatch.Scale )
            {
                @if( color.Key != "default" && color.Key != "foreground" )
                {
                    var isDivider = color.Key == "divider";

                    <LumexButton Color="@ThemeColor.None"
                                 Class="w-full min-w-fit h-auto p-0 justify-start gap-x-3 overflow-visible rounded-small sm:block sm:space-y-1">
                        <div class="relative w-12 h-12 rounded-md ring-1 ring-inset ring-foreground-950/10 sm:w-full"
                             style="background-color: @(color.Value + (isDivider ? "26" : default))">

                            <span class="hidden absolute top-1 right-1.5 font-medium text-[0.625rem] leading-none sm:block"
                                  style="color: @(isDivider ? "black" : ColorUtils.GetReadableColor(color.Value))">
                                @color.Key
                            </span>

                            @if( swatch.Scale.TryGetValue( "default", out var defValue ) && color.Value == defValue )
                            {
                                <span class="absolute top-1 left-1.5 text-[0.625rem] leading-none"
                                      style="color: @swatch.Scale["foreground"]">
                                    ●
                                </span>
                            }
                        </div>

                        <div class="px-0.5 text-left">
                            <div class="font-medium text-foreground-900 text-xs sm:hidden">@color.Key</div>
                            <div class="font-mono text-foreground-500 text-xs">@color.Value</div>
                        </div>
                    </LumexButton>
                }
            }
        </div>
    </div>
}

@code {
    private readonly Swatch[] _swatches = new Swatch[]
    {
        new("Base", [
            new( "bg", SemanticColors.Light.Background["default"] ),
            new( "text", SemanticColors.Light.Foreground["default"] ),
            new( "overlay", SemanticColors.Light.Overlay["default"] ),
            new( "divider", SemanticColors.Light.Divider["default"] ),
            new( "focus", SemanticColors.Light.Focus["default"] ),
            new( "surface1", SemanticColors.Light.Surface1["default"] ),
            new( "surface2", SemanticColors.Light.Surface2["default"] ),
            new( "surface3", SemanticColors.Light.Surface3["default"] ),
        ]),
        new("Default", SemanticColors.Light.Default),
        new("Primary", SemanticColors.Light.Primary),
        new("Secondary", SemanticColors.Light.Secondary),
        new("Success", SemanticColors.Light.Success),
        new("Warning", SemanticColors.Light.Warning),
        new("Danger", SemanticColors.Light.Danger),
        new("Info", SemanticColors.Light.Info),
    };

    private record Swatch( string Title, ColorScale Scale );
}
