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

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

let approvalId = null;

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;
        }
        $("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();
    });
}

module.exports = { init, show };