@page "/drive"
@page "/drive/{Id}"
@attribute [Authorize]
@using Iceshrimp.Frontend.Localization
@using Microsoft.AspNetCore.Components.Sections
@using Microsoft.Extensions.Localization
@using Iceshrimp.Assets.PhosphorIcons
@using Iceshrimp.Frontend.Core.Miscellaneous
@using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Shared.Schemas.Web
@using Microsoft.AspNetCore.Authorization
@using Iceshrimp.Frontend.Components
@inject ApiService                     Api;
@inject IJSRuntime                     Js;
@inject IStringLocalizer<Localization> Loc;
@inject ILogger<DrivePage>             Logger;
@inject NavigationManager              Nav;

<SectionContent SectionName="top-bar">
    @if (_state == State.Loaded && Folder is { Id: not null, Name: not null })
    {
        <span class="btn" @onclick="NavigateToParent">
            <Icon Name="Icons.ArrowLeft"/>
        </span>
        @Folder.Name
    }
    else
    {
        <Icon Name="Icons.Cloud"/>
        @Loc["Drive"]
    }
    @if (_state == State.Loaded && Folder is not null)
    {
        <span class="action btn" @onclick="OpenUpload" title="@Loc["Upload file"]">
            <Icon Name="Icons.UploadSimple"/>
        </span>
    }
</SectionContent>

<div class="file-input">
    <InputFile @ref="UploadInput" OnChange="Upload">Upload!</InputFile>
</div>

@if (_state == State.Loaded && Folder != null)
{
    <ol class="drive-files">
        @foreach (var el in Folder.Folders)
        {
            <li>
                <DriveEntry Folder="el" />
            </li>
        }
        @foreach (var el in Folder.Files)
        {
            <li>
                <DriveEntry File="el"/>
            </li>
        }
    </ol>
}
@if (_state == State.Loading)
{
    <div>Loading</div>
}
@if (_state == State.NotFound)
{
    <div>This folder does not exist</div>
}
@if (_state == State.Error)
{
    <div>An error occured while loading the drive folder. Please inspect logs.</div>
}

@code {
    [Parameter] public string?              Id          { get; set; }
    private            DriveFolderResponse? Folder      { get; set; } = null;
    private            State                _state      { get; set; }
    private            InputFile            UploadInput { get; set; } = null!;
    private            IJSObjectReference   _module = null!;

    private async Task Load()
    {
        Logger.LogTrace($"Opening drive folder: {Id ?? "root"}");
        _state = State.Loading;

        try
        {
            Folder = await Api.Drive.GetFolderAsync(Id);
        }
        catch (ApiException e)
        {
            Logger.LogWarning($"Failed to load folder '{Id ?? "root"}' due to API Exception: {e.Message}");
            _state = State.Error;
            return;
        }

        if (Folder == null)
        {
            _state = State.NotFound;
            return;
        }

        _state = State.Loaded;
    }

    protected override async Task OnInitializedAsync()
    {
        await Load();
        _module = await Js.InvokeAsync<IJSObjectReference>("import",
                                                           "./Pages/DrivePage.razor.js");
    }
    
    protected override async Task OnParametersSetAsync()
    {
        await Load();
    }

    private void NavigateToParent()
    {
        Nav.NavigateTo(Folder?.ParentId != null ? $"/drive/{Folder.ParentId}" : "/drive");
    }

    // The <InputFile> Component is hidden, and triggered by a sepperate button.
    // That way we get it's functionality, without the styling limitations of the InputFile component
    private async Task OpenUpload()
    {
        await _module.InvokeVoidAsync("openUpload", UploadInput.Element);
    }
    
    private async Task Upload(InputFileChangeEventArgs e)
    {
        var res = await Api.Drive.UploadFileAsync(e.File);
        Folder!.Files.Add(res);
        StateHasChanged();
    }
}