@page "/"

@inherits Fluxor.Blazor.Web.Components.FluxorComponent

@using System.Linq
@using Start.Client.Components
@using Start.Client.Store.State
@using Start.Client.Store.Features.CurrentContainer
@using Start.Client.Store.Features.CreateContainer
@using Start.Client.Store.Features.DeleteContainer
@using Fluxor

@* Distinguish from Refit.Authorize *@
@attribute [Microsoft.AspNetCore.Authorization.Authorize]

@inject Blazored.LocalStorage.ILocalStorageService localStorage
@inject IState<RootState> state
@inject IDispatcher dispatch

@if (this.state.Value.ContainerListState.ErrorMessage != null) {
    <Alert Type="Alert.AlertType.Error">
        <b>Error</b> @this.state.Value.ContainerListState.ErrorMessage
    </Alert>
}

@if (this.state.Value.ContainerListState.IsLoadingContainersList)
{
    <div class="empty">
        <div class="empty-icon">
            <div class="loading loading-lg"></div>
        </div>
        <p class="empty-title h5">Loading Containers</p>
    </div>
}
else
{
    <ul class="containerList tab">
        @foreach (BookmarkContainerDto container in this.state.Value.ContainerListState.Containers)
        {
            string itemClasses = "tab-item";
            if (container.BookmarkContainerId == this.state.Value.CurrentContainerState.Container?.BookmarkContainerId)
                itemClasses += " active";

            <li class="@itemClasses">
                <a @onclick="() => OnContainerSelected(container.BookmarkContainerId)">
                    @container.Title
                    <button class="btn btn-clear"
                            @onclick="() => this.OnDeleteContainerClicked(container.BookmarkContainerId)">
                    </button>
                </a>
            </li>
        }
        <li class="tab-item tab-action">
            <button @onclick="OnCreateContainerClicked" class="btn btn-link tooltip tooltip-left"
                    title="Create New Container" aria-label="Create New Container"
                    data-tooltip="Create Container">
                +
            </button>
        </li>
    </ul>

    <BookmarkContainer />

    <CreateContainer />
    <DeleteContainer />

    <CreateGroup />
}

@code
{
    protected void OnContainerSelected(int bookmarkContainerId)
    {
        dispatch.Dispatch(new LoadCurrentContainerAction(bookmarkContainerId));
    }

    protected void OnDeleteContainerClicked(int bookmarkContainerId)
    {
        BookmarkContainerDto? bookmarkContainerToDelete = this.state.Value.ContainerListState
            .Containers
            ?.FirstOrDefault(bc => bc.BookmarkContainerId == bookmarkContainerId);

        if (bookmarkContainerToDelete == null)
            return;

        this.dispatch.Dispatch(new ShowDeleteContainerFormAction(
            bookmarkContainerToDelete.BookmarkContainerId, bookmarkContainerToDelete.Title));
    }

    protected void OnCreateContainerClicked()
    {
        dispatch.Dispatch(new ShowCreateContainerFormAction());
    }
}