@namespace Lumeo
@typeparam TItem

@if (Context is not null && Context.EffectiveColumns is not null)
{
    <div class="relative">
        <button type="button"
                class="inline-flex items-center justify-center h-8 px-3 rounded-md text-sm border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring focus-visible:ring-offset-2"
                @onclick="ToggleColumnPanel">
            <Blazicon Svg="Lucide.Columns3" class="h-4 w-4 mr-1.5" />
            <span>@Context.Localizer["DataGrid.Columns"]</span>
        </button>

        @if (_columnPanelOpen)
        {
            <div class="absolute right-0 top-full mt-1 z-50">
                <DataGridColumnVisibility TItem="TItem"
                                          Columns="Context.EffectiveColumns"
                                          OnColumnToggle="Context.OnColumnToggle"
                                          OnColumnReorder="Context.OnColumnReorder" />
            </div>
        }
    </div>
}

@code {
    [CascadingParameter] public DataGridToolbarContext<TItem>? Context { get; set; }

    private bool _columnPanelOpen;

    private void ToggleColumnPanel()
    {
        _columnPanelOpen = !_columnPanelOpen;
    }
}
