const { $, showView, showFlash, addressDotHtml } = require("./helpers");
const { state, currentAddress } = require("../../shared/state");
const QRCode = require("qrcode");

const EXT_ICON =
    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
    `<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
    `<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
    `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
    `</svg></span>`;

function show() {
    const addr = currentAddress();
    const address = addr ? addr.address : "";
    $("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
    $("receive-address").textContent = address;
    const link = address ? `https://etherscan.io/address/${address}` : "";
    $("receive-etherscan-link").innerHTML = link
        ? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
        : "";
    if (address) {
        QRCode.toCanvas($("receive-qr"), address, {
            width: 200,
            margin: 2,
            color: { dark: "#000000", light: "#ffffff" },
        });
    }
    const warningEl = $("receive-erc20-warning");
    if (state.selectedToken && state.selectedToken !== "ETH") {
        // Look up symbol from address token balances
        const addrObj = currentAddress();
        let symbol = state.selectedToken;
        if (addrObj) {
            const tb = (addrObj.tokenBalances || []).find(
                (t) =>
                    t.address.toLowerCase() ===
                    state.selectedToken.toLowerCase(),
            );
            if (tb) symbol = tb.symbol;
        }
        warningEl.textContent =
            "This is an ERC-20 token. Only send " +
            symbol +
            " on the Ethereum network to this address. Sending tokens on other networks will result in permanent loss.";
        warningEl.classList.remove("hidden");
    } else {
        warningEl.classList.add("hidden");
    }
    showView("receive");
}

function init(ctx) {
    $("btn-receive-copy").addEventListener("click", () => {
        const addr = $("receive-address").textContent;
        if (addr) {
            navigator.clipboard.writeText(addr);
            showFlash("Copied!");
        }
    });

    $("btn-receive-back").addEventListener("click", () => {
        if (state.selectedToken) {
            ctx.showAddressToken();
        } else {
            ctx.showAddressDetail();
        }
    });
}

module.exports = { init, show };