@using BTCPayServer.Services.Apps
@model BTCPayServer.Components.AppTopItems.AppTopItemsViewModel

@{
    var controller = $"UI{Model.App.AppType}";
    var action = $"Update{Model.App.AppType}";
    var label = Model.App.AppType == nameof(AppType.Crowdfund) ? "contribution" : "sale";
}

<div id="AppTopItems-@Model.App.Id" class="widget app-top-items">
    <header class="mb-3">
        <h3>Top @(Model.App.AppType == nameof(AppType.Crowdfund) ? "Perks" : "Items")</h3>
        <a asp-controller="@controller" asp-action="@action" asp-route-appId="@Model.App.Id">View All</a>
    </header>
    @if (Model.InitialRendering)
    {
        <div class="loading d-flex justify-content-center p-3">
            <div class="spinner-border text-light" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <script>
            (async () => {
                const url = @Safe.Json(Url.Action("AppTopItems", "UIApps", new { appId = Model.App.Id }));
                const appId = @Safe.Json(Model.App.Id);
                const response = await fetch(url);
                if (response.ok) {
                    document.getElementById(`AppTopItems-${appId}`).outerHTML = await response.text();
                    const initScript = document.querySelector(`#AppTopItems-${appId} script`);
                    if (initScript) eval(initScript.innerHTML);
                }
            })();
        </script>
    }
    else if (Model.Entries.Any())
    {
        <div class="ct-chart mb-3"></div>
        <script>
            (function () {
                const id = @Safe.Json($"AppTopItems-{Model.App.Id}");
                const series = @Safe.Json(Model.Entries.Select(i => i.SalesCount));
                new Chartist.Bar(`#${id} .ct-chart`, { series }, {
                    distributeSeries: true,
                    horizontalBars: true,
                    showLabel: false,
                    stackBars: true,
                    axisY: {
                        offset: 0
                    }
                });
            })();
        </script>
        <div class="app-items">
            @for (var i = 0; i < Model.Entries.Count; i++)
            {
                var entry = Model.Entries[i];
                <div class="app-item ct-series-@i">
                    <span class="app-item-name">
                        <span class="app-item-point ct-point"></span>
                        @entry.Title
                    </span>
                    <span class="app-item-value">
                        <span class="text-muted">@entry.SalesCount @($"{label}{(entry.SalesCount == 1 ? "" : "s")}"),</span>
                        @entry.TotalFormatted
                    </span>
                </div>
            }
        </div>
    }
    else
    {
        <p class="text-secondary mt-3">
            No @($"{label}s") have been made yet.
        </p>
    }
</div>