@page "/transactions"
@rendermode InteractiveServer
@using Schaad.Accounting.UI.Components.Pages.Charts

<PageTitle>Transaktionen</PageTitle>

<FluentStack Orientation="Orientation.Horizontal" Width="100%">
    <FluentNavMenu Width="700">
        @foreach (var gr in accounts.GroupBy(a => a.ClassName))
        {
            <FluentNavGroup Title="@(gr.Key)" Expanded="true">
                @foreach (var account in gr)
                {
                    <FluentNavLink OnClick="() => ShowTransactionsAsync(account.Id)" Icon="@(new Icons.Regular.Size24.CalendarAgenda())">
                        <FluentStack Orientation="Orientation.Horizontal">
                            <div>
                                @account.Number / @account.Name
                            </div>
                            <div style="margin-left: auto;">
                                <FluentBadge Appearance="Appearance.Neutral">
                                    @Math.Abs(account.Balance).ToString("N2") @account.Currency
                                </FluentBadge>
                            </div>
                        </FluentStack>
                    
                    </FluentNavLink>
                }
            </FluentNavGroup>
        }
    </FluentNavMenu>
    
    <FluentBodyContent>
        @if (selectedAccount is not null)
        {
            <FluentGrid Justify="JustifyContent.FlexStart">
                <FluentGridItem xs="4" Class="align-content-center title">
                    @selectedAccount.Name
                </FluentGridItem>
                <FluentGridItem xs="4" Class="align-content-center">
                    Total @Math.Abs(selectedAccount.Balance).ToString("N2") @selectedAccount.Currency in @transactionList?.Count() Transaktionen
                </FluentGridItem>
                <FluentGridItem xs="4" Class="align-content-center" Justify="JustifyContent.FlexEnd">
                    <FluentButton IconStart="@(new Icons.Regular.Size16.Add())" Appearance="Appearance.Neutral" OnClick="AddAsync">Neue Transaktion hinzufügen</FluentButton>
                </FluentGridItem>
            </FluentGrid>

            <FluentGrid Justify="JustifyContent.FlexStart">
                <FluentGridItem xs="6">
                    <BookingTextOverTime @key="selectedAccount.Id" AccountId="@selectedAccount.Id"/>
                </FluentGridItem>
                <FluentGridItem xs="6">
                    <BookingTextBreakdown @key="selectedAccount.Id" AccountId="@selectedAccount.Id"/>
                </FluentGridItem>
            </FluentGrid>

            <FluentPaginator State="@pagination" SummaryTemplate="@template"/>
            <FluentDataGrid Items="@transactionList" Pagination="@pagination" RowSize="DataGridRowSize.Medium">
                <PropertyColumn Property="@(p => p.BookingDate)" Format="dd.MM.yyyy" Sortable="true" IsDefaultSortColumn="true" InitialSortDirection="SortDirection.Descending"/>
                <PropertyColumn Property="@(p => p.ValueDate)" Format="dd.MM.yyyy" Sortable="true"/>
                <PropertyColumn Property="@(p => p.Text)"/>
                <TemplateColumn Title="Gegenkonto">
                    @GetAccountName(context)
                </TemplateColumn>
                <TemplateColumn Title="Betrag" Align="Align.End">
                    @context.GetValue(selectedAccount.IsFxAccount).ToString("N2") @selectedAccount.Currency
                </TemplateColumn>
                <TemplateColumn Align="Align.Center" Width="50px">
                    <FluentButton IconEnd="@(new Icons.Regular.Size16.Delete())" Appearance="Appearance.Neutral" title="Löschen" aria-label="Löschen" OnClick="@(() => DeleteAsync(context.Id))"/>
                </TemplateColumn>
                <TemplateColumn Align="Align.Center" Width="50px">
                    <FluentButton IconEnd="@(new Icons.Regular.Size16.Edit())" Appearance="Appearance.Neutral" title="Bearbeiten" aria-label="Bearbeiten" OnClick="@(() => EditAsync(context.Id))"/>
                </TemplateColumn>
            </FluentDataGrid>
        }
    </FluentBodyContent>
</FluentStack>

@code
{
    private RenderFragment template = @<span />;
    PaginationState pagination = new PaginationState() { ItemsPerPage = 20 };
}