<?php /** @var \Adyen\Payment\Model\Config\Adminhtml\MerchantAccounts $block */
echo $block->getButtonHtml() ?>
<script>
    require([
            'jquery',
            'prototype'
        ],
        function(jQuery)
        {
            jQuery('#adyen_payments_configuration_errors').hide();
            let progressSpan = jQuery('#progress');

            jQuery('#adyen_configure_merchants').click(function () {
                let xapi_key = '';
                let demo_mode = document.querySelector(
                    "div.adyen_required_config_settings select[name*='demo_mode']").value;
                if (demo_mode == 1) {
                    xapi_key = document.querySelector(
                        "div.adyen_required_config_settings input[name*='api_key_test']").value;
                } else {
                    xapi_key = document.querySelector(
                        "div.adyen_required_config_settings input[name*='api_key_live']").value;
                }
                const storeId = '<?= $block->escapeJs($block->getStoreId()) ?>';
                new Ajax.Request('<?= $block->escapeJs($block->getAjaxUrl()) ?>', {
                    parameters: {xapikey: xapi_key, demoMode: demo_mode, storeId},
                    type: "POST",
                    loaderArea:     false,
                    asynchronous:   true,
                    onCreate: function() {
                        progressSpan.find('.configured').hide();
                        progressSpan.find('.processing').show();
                        jQuery('#adyen_payments_configured_message').text('');
                        jQuery("#adyen_configure_merchants").prop('disabled', true);
                    },
                    onSuccess: function (response) {
                        //add html response
                        progressSpan.find('.processing').hide();
                        let resultText = '';
                        if (response.status > 200) {
                            resultText = response.statusText;
                        } else if (response.responseJSON === null) {
                            resultText = "Could not retrieve the response";
                        } else {
                            let merchantAccountSelect = document.querySelector(
                                "div.adyen_required_config_settings select[name*='merchant_account']");
                            //remove previous accounts
                            for (let i = merchantAccountSelect.options.length - 1; i >= 0; i--) {
                                merchantAccountSelect.remove(i);
                            }
                            //add the merchant accounts to the html element
                            let accounts = response.responseJSON.messages.associatedMerchantAccounts;
                            for (i = 0; i < accounts.length; i++) {
                                merchantAccountSelect.add(new Option(accounts[i], accounts[i]));
                            }
                            merchantAccountSelect.value = response.responseJSON.currentMerchantAccount;
                            //add the clientkey
                            let clientkey = response.responseJSON.messages.clientKey;
                            if (response.responseJSON.mode == 'test') {
                                let clientKeyIdTest = document.querySelector(
                                    "div.adyen_required_config_settings input[name*='client_key_test']");
                                clientKeyIdTest.value = clientkey;
                            } else if (response.responseJSON.mode == 'production') {
                                let clientKeyIdLive = document.querySelector(
                                    "div.adyen_required_config_settings input[name*='client_key_live']");
                                clientKeyIdLive.value = clientkey;
                            }
                            const allowedOriginInput = document.querySelector(
                                "div.adyen_required_config_settings input[name*='allowed_origin']");
                            allowedOriginInput.value = response.responseJSON.originUrl;
                            resultText = 'Completed';
                            progressSpan.find('.configured').show();
                        }
                        jQuery('#adyen_payments_configured_message').text(resultText);
                    },
                    onFailure: function(response)
                    {
                        progressSpan.find('.processing').hide();
                        jQuery('#adyen_payments_configured_message').text("Failed").show();
                    },
                    onComplete: function()
                    {
                        jQuery("#adyen_configure_merchants").prop('disabled', false);
                    }
                });
            });

        });
</script>
<!--<span class="adyen-required-settings-config-admin" id="progress">
    <img class="processing" hidden="hidden" alt="Configuring" style="margin:0 5px" src="<?php /*echo $block->getViewFileUrl('images/process_spinner.gif') */?>"/>
    <img class="configured" hidden="hidden" alt="Configured" style="margin:-3px 5px" src="<?php /*echo $block->getViewFileUrl('images/rule_component_apply.gif') */?>"/>
    <span id="adyen_payments_configured_message"></span>
    <div id="adyen_payments_configuration_errors" class="message-system-inner">
        <div class="message message-warning"></div>
    </div>
</span>-->
<!--if we want to add a note under the button-->
<p class="note">
    <span><?= $block->escapeHtml(__('Retrieves the associated merchant accounts, client key and the allowed origin.')); ?></span>
</p>
<hr>
