@namespace AntDesign
@inherits AntDomComponentBase

@using AntDesign.Internal;

<span style="@Style" @ref="Ref" class="@ClassMapper.Class @(IsPictureCard? "ant-upload-picture-card-wrapper" : "")"
     @ondragover="@HandleDrag"
     @ondragleave="@HandleDrag"
     @ondrop="@HandleDrag"
     @ondragover:stopPropagation
     @ondragleave:stopPropagation
     @ondrop:stopPropagation>
        @if (!IsPictureCard || !ShowUploadList)
        {
            <CascadingValue Value="this" IsFixed>
                <UploadButton Action="@Action"
                          Accept="@Accept"
                          ListType="@ListType"
                          Name="@Name"
                          Directory="@Directory"
                          Multiple="@Multiple"
                          Data="@Data"
                          Headers="@Headers"
                          Disabled="Disabled"
                          ShowButton="@ShowButton">
                    @ChildContent
                </UploadButton>
            </CascadingValue>
        }

    @if (ShowUploadList)
    {
        <div class="@_listClassMapper.Class">
            @{
                var containerClass = ListType switch
                {
                    "picture-card" => "ant-upload-list-picture-card-container",
                    "text" => "ant-upload-list-text-container",
                    "picture" => "ant-upload-list-picture-container",
                    _ => ""
                };

            }

            @foreach (var file in FileList)
            {
                var tips = string.Empty;
                var stateClass = string.Empty;
                string picture = "";

                switch (file.State)
                {
                    case UploadState.Uploading:
                        tips = Locale.Uploading;
                        break;
                    case UploadState.Fail:
                        tips = !string.IsNullOrWhiteSpace(file.Response) ? file.Response : Locale.UploadError;
                        stateClass = "ant-upload-list-item-error";
                        break;
                    case UploadState.Success:
                        tips = file.FileName;
                        stateClass = "ant-upload-list-item-done";
                        break;
                }

                <Tooltip Title="tips" Disabled="file.State != UploadState.Fail">
                    <Unbound>
                        <div Class="@containerClass" Style="@(IsPictureCard ? "" : "display: list-item;")">
                            @if (IsPictureCard && file.State == UploadState.Uploading)
                            {
                                <div class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture-card" @ref="@context.Current">
                                    <div class="ant-upload-list-item-info">
                                        <div class="ant-upload-list-item-thumbnail">@Locale.Uploading</div>
                                        <span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="@file.FileName">
                                            @file.FileName
                                        </span>
                                    </div>
                                    <div class="ant-upload-list-item-progress">
                                        <Progress Percent="file.Percent" StrokeWidth="2" Type="ProgressType.Line" ShowInfo="false"></Progress>
                                    </div>
                                </div>
                            }
                            else
                            {
                                <div class="ant-upload-list-item @stateClass  ant-upload-list-item-list-type-@ListType" @ref="@context.Current">
                                    <div class="ant-upload-list-item-info">
                                        <span class="ant-upload-span">
                                            @if (IsText)
                                            {
                                                <div class="ant-upload-text-icon">
                                                    @if (file.State == UploadState.Uploading)
                                                    {
                                                        <Icon Type="loading" />
                                                    }
                                                    else
                                                    {
                                                        <Icon Type="paper-clip" />
                                                    }
                                                </div>
                                            }
                                            else
                                            {
                                                if (file.State == UploadState.Success)
                                                {
                                                    <a class="ant-upload-list-item-thumbnail" href="@file.Url" target="_blank" rel="noopener noreferrer">
                                                        @if (file.IsPicture())
                                                        {
                                                            <img src="@(file.ObjectURL ?? file.Url)" alt="@file.FileName" class="ant-upload-list-item-image" />
                                                        }
                                                        else
                                                        {
                                                            <Icon Type="file" />
                                                        }
                                                    </a>
                                                }
                                                else
                                                {
                                                    <div class="ant-upload-list-item-thumbnail ant-upload-list-item-file">
                                                        <Icon Type="picture" />
                                                    </div>
                                                }
                                                picture = "picture";
                                            }
                                            @if (OnDownload.HasDelegate)
                                            {
                                                <a rel="noopener noreferrer" class="ant-upload-list-item-name" title="@file.FileName" @onclick="() => DownloadFile(file)">@file.FileName</a>
                                            }
                                            else
                                            {
                                                <a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name" title="@file.FileName" href="@file.Url">@file.FileName</a>
                                            }
                                            @if (!IsPictureCard)
                                            {
                                                <span class="ant-upload-list-item-card-actions @picture">
                                                    <button title="@Locale.RemoveFile" type="button" class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" @onclick="() => RemoveFile(file)" disabled="@Disabled">
                                                        <Icon Type="delete" />
                                                    </button>
                                                </span>
                                            }
                                        </span>
                                    </div>
                                    @if (IsPictureCard)
                                    {
                                        <span class="ant-upload-list-item-actions">
                                            <a href="@(OnPreview.HasDelegate ? null : file.Url)" target="_blank" rel="noopener noreferrer" title="@Locale.PreviewFile" @onclick="() => PreviewFile(file)" style="@(file.State==UploadState.Fail?"pointer-events: none; opacity: 0.5;":"")">
                                                <Icon Type="eye" />
                                            </a>
                                            <button title="@Locale.RemoveFile" type="button" class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" @onclick="() => RemoveFile(file)" disabled="@Disabled">
                                                <Icon Type="delete" />
                                            </button>
                                        </span>
                                    }
                                    @if (file.State == UploadState.Uploading)
                                    {
                                        <div class="ant-upload-list-item-progress">
                                            <Progress Percent="file.Percent" StrokeWidth="2" Type="ProgressType.Line" ShowInfo="false"></Progress>
                                        </div>
                                    }
                                </div>
                            }
                        </div>
                    </Unbound>
                </Tooltip>
            }

            @if (IsPictureCard)
            {
                <CascadingValue Value="this" IsFixed>
                    <UploadButton Action="@Action"
                          Accept="@Accept"
                          ListType="@ListType"
                          Name="@Name"
                          Directory="@Directory"
                          Multiple="@Multiple"
                          Data="@Data"
                          Headers="@Headers"
                          Disabled="Disabled"
                          ShowButton="@ShowButton">
                        @ChildContent
                    </UploadButton>
                </CascadingValue>
            }
        </div>
    }
</span>