@inject ISnackbar Snackbar

<style>
    .file-upload-input {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 10;
        opacity: 0;
    }
</style>

<MudStack Style="width: 100%">
    <MudFileUpload T="IReadOnlyList<IBrowserFile>"
                   @ref="@_fileUpload"
                   OnFilesChanged="OnInputFileChanged"
                   AppendMultipleFiles
                   Hidden="@false"
                   InputClass="file-upload-input"
                   tabindex="-1"
                   @ondrop="@ClearDragClass"
                   @ondragenter="@SetDragClass"
                   @ondragleave="@ClearDragClass"
                   @ondragend="@ClearDragClass">
        <ActivatorContent>
            <MudPaper Height="300px"
                      Outlined="true"
                      Class="@_dragClass">
                <MudText Typo="Typo.h6">
                    Drag and drop files here or click
                </MudText>
                @foreach (var file in _fileNames)
                {
                    <MudChip T="string"
                             Color="Color.Dark"
                             Text="@file"
                             tabindex="-1" />
                }
            </MudPaper>
        </ActivatorContent>
    </MudFileUpload>
    <MudToolBar Gutters="@false"
                Class="relative d-flex justify-end gap-4">
        <MudButton Color="Color.Primary"
                   OnClick="@OpenFilePickerAsync"
                   Variant="Variant.Filled">
            Open file picker
        </MudButton>
        <MudButton Color="Color.Primary"
                   Disabled="@(!_fileNames.Any())"
                   OnClick="@Upload"
                   Variant="Variant.Filled">
            Upload
        </MudButton>
        <MudButton Color="Color.Error"
                   Disabled="@(!_fileNames.Any())"
                   OnClick="@ClearAsync"
                   Variant="Variant.Filled">
            Clear
        </MudButton>
    </MudToolBar>
</MudStack>

@code {
#nullable enable
    private const string DefaultDragClass = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full";
    private string _dragClass = DefaultDragClass;
    private readonly List<string> _fileNames = new();
    private MudFileUpload<IReadOnlyList<IBrowserFile>>? _fileUpload;

    private async Task ClearAsync()
    {
        await (_fileUpload?.ClearAsync() ?? Task.CompletedTask);
        _fileNames.Clear();
        ClearDragClass();
    }

    private Task OpenFilePickerAsync()
        => _fileUpload?.OpenFilePickerAsync() ?? Task.CompletedTask;

    private void OnInputFileChanged(InputFileChangeEventArgs e)
    {
        ClearDragClass();
        var files = e.GetMultipleFiles();
        foreach (var file in files)
        {
            _fileNames.Add(file.Name);
        }
    }

    private void Upload()
    {
        // Upload the files here
        Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
        Snackbar.Add("TODO: Upload your files!");
    }

    private void SetDragClass()
        => _dragClass = $"{DefaultDragClass} mud-border-primary";

    private void ClearDragClass()
        => _dragClass = DefaultDragClass;
}