document.getElementById('submitBtn').addEventListener('click', async function () {
    document.getElementById('successIndicator').style.display = 'none';
    document.getElementById('failureIndicator').style.display = 'none';
    document.getElementById('loadingIndicator').style.display = 'block';
    // Getting values from input fields
    const input1 = document.getElementById('input1').value;
    const input2 = document.getElementById('input2').value;
    const input3 = document.getElementById('input3').value;



    // Call a specific pallet function (example: transfer)
    // Replace 'palletName.methodName' with the actual pallet method you want to call
    // and adjust the parameters as needed.
    try {
        const transaction = api.tx.zkpVerifyModule.verifyProofPlonk(input1, input2, input3);
        const unsub = await transaction.signAndSend(selectedAccount, { signer: injector.signer }, ({ status, events, dispatchError }) => {
            
            if (status.isInBlock || status.isFinalized) {
                events.forEach(({ event: { data, method, section } }) => {
                    console.log(`Event: ${section}.${method}`, data.toString());
                    if (method === 'ValidationSuccess') {
                        document.getElementById('loadingIndicator').style.display = 'none';
                        document.getElementById('successIndicator').style.display = 'block';
                    }
                });

                if (dispatchError) {
                    document.getElementById('loadingIndicator').style.display = 'none';
                    document.getElementById('failureIndicator').style.display = 'block';
                    if (dispatchError.isModule) {
                        // For module errors, we have the section indexed, lookup
                        const decoded = api.registry.findMetaError(dispatchError.asModule);
                        const { documentation, method, section } = decoded;

                        console.error(`${section}.${method}: ${documentation.join(' ')}`);
                    } else {
                        // Other, CannotLookup, BadOrigin, no extra info
                        console.error(dispatchError.toString());
                    }
                }
                unsub();
            }
        });
    } catch (error) {
        console.error('Error:', error);
    }
});
let api;
let selectedAccount;
let injector;
// On page loaded
window.addEventListener('load', async () => {
    // Initialize the Polkadot.js API
    const { ApiPromise, WsProvider } = polkadotApi;
    const wsProvider = new WsProvider('ws://127.0.0.1:9944');
    api = await ApiPromise.create({ provider: wsProvider });

    // Initialize the Polkadot.js API
    const { web3Accounts, web3Enable, web3FromAddress } = polkadotExtensionDapp;
    

    // Request access to the user's Polkadot.js accounts
    const extensions = await web3Enable('My Polkadot.js Integration App');
    if (extensions.length === 0) {
        // No extension installed, or the user refused to authorize access
        return;
    }

    // Get the user's accounts
    const allAccounts = await web3Accounts();
    if (allAccounts.length === 0) {
        // No accounts available
        return;
    }

    // Select account to use (for simplicity, using the first account)
    selectedAccount = allAccounts[0].address;
    injector = await web3FromAddress(selectedAccount);

});

document.getElementById('successIndicator').style.display = 'none';
document.getElementById('failureIndicator').style.display = 'none';