@using BTCPayServer.Components.StoreLightningBalance
@using BTCPayServer.Components.StoreLightningServices
@using BTCPayServer.Components.StoreNumbers
@using BTCPayServer.Components.StoreRecentInvoices
@using BTCPayServer.Components.StoreRecentTransactions
@using BTCPayServer.Components.StoreWalletBalance
@using BTCPayServer.Components.AppSales
@using BTCPayServer.Components.AppTopItems
@using BTCPayServer.Client
@model StoreDashboardViewModel
@{
    ViewData.SetActivePage(StoreNavPages.Dashboard, Model.StoreName, Model.StoreId);
    var store = ViewContext.HttpContext.GetStoreData();
}

<h2 class="mb-2 mb-lg-3">@ViewData["Title"]</h2>
<partial name="_StatusMessage" />

@if (Model.IsSetUp)
{
    /* include chart library inline so that it instantly renders */
    <link rel="stylesheet" href="~/vendor/chartist/chartist.css" asp-append-version="true">
    <link rel="stylesheet" href="~/vendor/chartist/chartist-plugin-tooltip.css" asp-append-version="true">
    <script src="~/vendor/chartist/chartist.min.js" asp-append-version="true"></script>
    <script src="~/vendor/chartist/chartist-plugin-tooltip.js" asp-append-version="true"></script>
    <script>
        const DashboardUtils = {
            toDefaultCurrency(amount, rate) {
                return Math.round((amount * rate) * 100) / 100;
            },
            displayDefaultCurrency(amount, rate, currency, divisibility) {
                const value = DashboardUtils.toDefaultCurrency(amount, rate);
                const locale = currency === 'USD' ? 'en-US' : navigator.language;
                const isSats = currency === 'SATS';
                if (isSats) currency = 'BTC';
                const opts = { currency, style: 'decimal', minimumFractionDigits: divisibility };
                const val = new Intl.NumberFormat(locale, opts).format(value);
                return isSats ? val.replace(/[\\.,]/g, ' ') : val;
            },
            async fetchRate(currencyPair) {
                const storeId = @Safe.Json(Context.GetRouteValue("storeId"));
                const pathBase = @Safe.Json(Context.Request.PathBase);
                const response = await fetch(`${pathBase}/api/rates?storeId=${storeId}&currencyPairs=${currencyPair}`);
                const json = await response.json();
                const rate = json[0] && json[0].rate;
                if (rate) return rate;
                else console.warn(`Fetching rate for ${currencyPair} failed.`);
            }
        };
    </script>
    <div id="Dashboard" class="mt-4">
        <vc:ui-extension-point location="dashboard" model="@Model"/>
        @if (Model.WalletEnabled)
        {
            <vc:store-wallet-balance store="@store"/>
        }
        else
        {
            <div class="widget setup-guide">
                <header>
                    <h5 class="mb-4 text-muted">This store is ready to accept transactions, good job!</h5>
                </header>
                <div class="list-group" id="SetupGuide">
                    <div class="list-group-item d-flex align-items-center" id="SetupGuide-LightningDone">
                        <vc:icon symbol="done"/>
                        <div class="content">
                            <h5 class="mb-0 text-success">Set up a Lightning node</h5>
                        </div>
                    </div>
                    <a asp-controller="UIStores" asp-action="SetupWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center">
                        <vc:icon symbol="wallet-new"/>
                        <div class="content">
                            <h5 class="mb-0">Set up a wallet</h5>
                        </div>
                        <vc:icon symbol="caret-right"/>
                    </a>
                </div>
            </div>
        }
        <vc:store-numbers vm="@(new StoreNumbersViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        @if (Model.LightningEnabled)
        {
            <vc:store-lightning-balance vm="@(new StoreLightningBalanceViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
            <vc:store-lightning-services vm="@(new StoreLightningServicesViewModel { Store = store, CryptoCode = Model.CryptoCode })" permission="@Policies.CanModifyServerSettings"/>
        }
        @if (Model.WalletEnabled)
        {
            <vc:store-recent-transactions vm="@(new StoreRecentTransactionsViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        }
        <vc:store-recent-invoices vm="@(new StoreRecentInvoicesViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        @foreach (var app in Model.Apps)
        {
		  <vc:app-sales app-id="@app.Id" app-type="@app.AppType" />
		  <vc:app-top-items app-id="@app.Id" app-type="@app.AppType" />
        }
    </div>
}
else
{
    <p class="lead text-secondary mt-2">To start accepting payments, set up a wallet or a Lightning node.</p>
    
    <div class="list-group" id="SetupGuide">
        <div class="list-group-item d-flex align-items-center" id="SetupGuide-StoreDone">
            <vc:icon symbol="done"/>
            <div class="content">
                <h5 class="mb-0 text-success">Create your store</h5>
            </div>
        </div>
        @if (Model.Network is BTCPayNetwork)
        {

            @if (!Model.WalletEnabled)
            {
                <a asp-controller="UIStores" asp-action="SetupWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center order-1">
                    <vc:icon symbol="wallet-new"/>
                    <div class="content">
                        <h5 class="mb-0">Set up a wallet</h5>
                    </div>
                    <vc:icon symbol="caret-right"/>
                </a>
            }
            else
            {
                <div class="list-group-item d-flex align-items-center" id="SetupGuide-WalletDone">
                    <vc:icon symbol="done"/>
                    <div class="content">
                        <h5 class="mb-0 text-success">Set up a wallet</h5>
                    </div>
                </div>
            }
        }
        @if (Model.LightningSupported) {
            if (!Model.LightningEnabled)
            {
                <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Lightning" class="list-group-item list-group-item-action d-flex align-items-center order-1">
                    <vc:icon symbol="wallet-new"/>
                    <div class="content">
                        <h5 class="mb-0">Set up a Lightning node</h5>
                    </div>
                    <vc:icon symbol="caret-right"/>
                </a>
            }
            else
            {
                <div class="list-group-item d-flex align-items-center" id="SetupGuide-LightningDone">
                    <vc:icon symbol="done"/>
                    <div class="content">
                        <h5 class="mb-0 text-success">Set up a Lightning node</h5>
                    </div>
                </div>
            }
        }
    </div>
}