// Shared DOM helpers used by all views.

const { DEBUG } = require("../../shared/constants");
const {
    formatUsd,
    getPrice,
    getAddressValueUsd,
} = require("../../shared/prices");

const VIEWS = [
    "welcome",
    "add-wallet",
    "import-key",
    "main",
    "address",
    "send",
    "confirm-tx",
    "receive",
    "add-token",
    "settings",
    "transaction",
    "approve",
];

function $(id) {
    return document.getElementById(id);
}

function showError(id, msg) {
    const el = $(id);
    el.textContent = msg;
    el.classList.remove("hidden");
}

function hideError(id) {
    $(id).classList.add("hidden");
}

function showView(name) {
    for (const v of VIEWS) {
        const el = document.getElementById(`view-${v}`);
        if (el) {
            el.classList.toggle("hidden", v !== name);
        }
    }
    clearFlash();
    if (DEBUG) {
        const banner = document.getElementById("debug-banner");
        if (banner) {
            banner.textContent = "DEBUG / INSECURE (" + name + ")";
        }
    }
}

let flashTimer = null;

function clearFlash() {
    if (flashTimer) {
        clearTimeout(flashTimer);
        flashTimer = null;
    }
    $("flash-msg").textContent = "";
}

function showFlash(msg, duration = 2000) {
    clearFlash();
    $("flash-msg").textContent = msg;
    flashTimer = setTimeout(() => {
        $("flash-msg").textContent = "";
        flashTimer = null;
    }, duration);
}

function balanceLine(symbol, amount, price) {
    const qty = amount.toFixed(4);
    const usd = price ? formatUsd(amount * price) : "";
    return (
        `<div class="flex text-xs">` +
        `<span class="flex justify-between" style="width:42ch">` +
        `<span>${symbol}</span>` +
        `<span>${qty}</span>` +
        `</span>` +
        `<span class="text-right text-muted flex-1">${usd}</span>` +
        `</div>`
    );
}

function balanceLinesForAddress(addr) {
    let html = balanceLine(
        "ETH",
        parseFloat(addr.balance || "0"),
        getPrice("ETH"),
    );
    for (const t of addr.tokenBalances || []) {
        const bal = parseFloat(t.balance || "0");
        if (bal === 0) continue;
        html += balanceLine(t.symbol, bal, getPrice(t.symbol));
    }
    return html;
}

module.exports = {
    $,
    showError,
    hideError,
    showView,
    showFlash,
    balanceLinesForAddress,
};