const { $, formatAddressHtml, showView } = require("./helpers");
const { state, saveState } = require("../../shared/state");
const { formatEther } = require("ethers");

const runtime =
    typeof browser !== "undefined" ? browser.runtime : chrome.runtime;

let approvalId = null;

function showTxApproval(details) {
    $("approve-tx-hostname").textContent = details.hostname;
    $("approve-tx-from").textContent = state.activeAddress;
    $("approve-tx-to").textContent =
        details.txParams.to || "(contract creation)";
    $("approve-tx-value").textContent =
        formatEther(details.txParams.value || "0") + " ETH";
    if (details.txParams.data && details.txParams.data !== "0x") {
        $("approve-tx-data").textContent = details.txParams.data;
        $("approve-tx-data-section").classList.remove("hidden");
    }
    showView("approve-tx");
}

function show(id) {
    approvalId = id;
    // Connect a port so the background detects if the popup closes
    // without an explicit response (e.g. user clicks away).
    runtime.connect({ name: "approval:" + id });
    runtime.sendMessage({ type: "AUTISTMASK_GET_APPROVAL", id }, (details) => {
        if (!details) {
            window.close();
            return;
        }
        if (details.type === "tx") {
            showTxApproval(details);
            return;
        }
        $("approve-hostname").textContent = details.hostname;
        $("approve-address").innerHTML = formatAddressHtml(
            state.activeAddress,
            null,
            null,
        );
        $("approve-remember").checked = state.rememberSiteChoice;
    });
}

function init(ctx) {
    $("approve-remember").addEventListener("change", async () => {
        state.rememberSiteChoice = $("approve-remember").checked;
        await saveState();
    });

    $("btn-approve").addEventListener("click", () => {
        const remember = $("approve-remember").checked;
        runtime.sendMessage({
            type: "AUTISTMASK_APPROVAL_RESPONSE",
            id: approvalId,
            approved: true,
            remember,
        });
        window.close();
    });

    $("btn-reject").addEventListener("click", () => {
        const remember = $("approve-remember").checked;
        runtime.sendMessage({
            type: "AUTISTMASK_APPROVAL_RESPONSE",
            id: approvalId,
            approved: false,
            remember,
        });
        window.close();
    });

    $("btn-approve-tx").addEventListener("click", () => {
        runtime.sendMessage({
            type: "AUTISTMASK_TX_RESPONSE",
            id: approvalId,
            approved: true,
            password: $("approve-tx-password").value,
        });
        window.close();
    });

    $("btn-reject-tx").addEventListener("click", () => {
        runtime.sendMessage({
            type: "AUTISTMASK_TX_RESPONSE",
            id: approvalId,
            approved: false,
        });
        window.close();
    });
}

module.exports = { init, show };