@namespace SufiChain.SufiBlazor.Components.Builder

<div class="sb-draggable-item @(_isDragging ? "sb-draggable-item--dragging" : "") @(Disabled ? "sb-draggable-item--disabled" : "") @Class"
     draggable="@(!Disabled)"
     @ondragstart="OnDragStart"
     @ondragend="OnDragEnd">
    @ChildContent
</div>

@code {
    private bool _isDragging;
    
    /// <summary>
    /// Item content.
    /// </summary>
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
    
    /// <summary>
    /// Data to transfer.
    /// </summary>
    [Parameter]
    public object? Data { get; set; }
    
    /// <summary>
    /// Item type for filtering.
    /// </summary>
    [Parameter]
    public string? ItemType { get; set; }
    
    /// <summary>
    /// Whether the item is disabled.
    /// </summary>
    [Parameter]
    public bool Disabled { get; set; }
    
    /// <summary>
    /// Callback when drag starts.
    /// </summary>
    [Parameter]
    public EventCallback<SbDragStartEventArgs> OnDragStarted { get; set; }
    
    /// <summary>
    /// Callback when drag ends.
    /// </summary>
    [Parameter]
    public EventCallback OnDragEnded { get; set; }
    
    /// <summary>
    /// Additional CSS classes.
    /// </summary>
    [Parameter]
    public string? Class { get; set; }
    
    private async Task OnDragStart(DragEventArgs e)
    {
        if (Disabled) return;
        
        _isDragging = true;
        
        var args = new SbDragStartEventArgs
        {
            Data = Data,
            ItemType = ItemType
        };
        
        await OnDragStarted.InvokeAsync(args);
    }
    
    private async Task OnDragEnd(DragEventArgs e)
    {
        _isDragging = false;
        await OnDragEnded.InvokeAsync();
    }
}

/// <summary>
/// Drag start event arguments.
/// </summary>
public class SbDragStartEventArgs
{
    /// <summary>
    /// Data being dragged.
    /// </summary>
    public object? Data { get; set; }
    
    /// <summary>
    /// Item type.
    /// </summary>
    public string? ItemType { get; set; }
}
