const url = new URL(window.location.href);
let transactionId = url.searchParams.get('transaction_id');
let debug = url.searchParams.get('debug');
transactionId = transactionId ? transactionId.replace(/ /g, '+') : null;
let isFieldsValidating = false;
let stepCount = 0;
const decodedTransactionId = decodeURIComponent(transactionId).replaceAll(' ', '+');

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('step-form-button-submit').addEventListener('click', ()=>{
        document.getElementById('step-form-button-submit').classList.remove('active');
        document.getElementById('step-form-button-submit').setAttribute("disabled", "");
        
        isFieldsValidating = false;
        let inputValue = document.getElementById("step-info-input").value;
        let inputValueTaxId = '';
        let inputValueEmail = '';
        let inputValuePhone = '';
        
        startTransaction(inputValue, decodedTransactionId, inputValueTaxId, inputValueEmail, inputValuePhone);
        
        setTimeout(() => {
            document.getElementById('payment-form-main-container').style.display = "none";
            document.getElementById('step-form-next-step-main').style.display = "block";
            document.getElementById("step-form-button-submit-save").classList.remove('active');
                document.getElementById("step-form-button-submit-save").setAttribute("disabled", "");
                document.querySelector(".customer-step-info-tax-id").classList.remove("correct");
        }, 1000);
    })

    const input = document.getElementById("step-info-input");
    input.addEventListener("input", function () {
        isFieldsValidating = true;
    });

    const stepFormButtonSubmitSave = document.getElementById("step-form-button-submit-save");

    stepFormButtonSubmitSave.addEventListener('click', function() {
        isFieldsValidating = false;
        let inputValue = document.getElementById("step-info-input").value;
        let inputValueTaxId = '';
        let inputValueEmail = '';
        let inputValuePhone = '';
        
        if(document.getElementById("step-info-input-tax-id")) {
         inputValueTaxId = document.getElementById("step-info-input-tax-id").value;
        
        }
         
        startTransaction(inputValue, decodedTransactionId, inputValueTaxId, inputValueEmail, inputValuePhone);
    });

    let banks = document.querySelectorAll(".bank-list-icon");

    banks.forEach(bank => {
        bank.addEventListener('click', function() {
            let bank_name = this.getAttribute("data-link");
            if (bank_name) {
                dlink(bank_name);
            }
        });
    });
});

function checkTransactionStatusAndRedirect(transactionId, user_id) {
    const url = '../check-transaction-status.php';
    const params = JSON.stringify({
        transaction_id: transactionId,
        user_id: user_id
    });

    fetch(url, {
        method: 'POST',
        body: params,
    })
        .then(response => response.json())
        .then(data => {
            if(data.status === 'PAID' && debug !== 'on') {
                if(!isFieldsValidating) {
                document.getElementsByClassName('payment-container')[0].style.display = "none";
                document.getElementsByClassName('step-form-next-step')[0].style.display = "none";
                document.getElementsByClassName('payment-form-container-bottom')[0].style.display = "none";
                document.getElementById('page-loader-container').style.display = "none";
                document.getElementById('page-main-form').style.display = "block";
                document.getElementsByClassName('result-main-container-sucess')[0].style.display = "block";
                
                } else {
                    const loader = document.querySelector("#status-label svg");
                    let status = document.querySelector("#status-label");
                    let statusText = document.querySelector("#status-label .field-value");
                    status.classList.remove("status-process");
                    loader.style.display = "none";
                    statusText.style.color = "#5fc65f";
                    document.querySelectorAll('#status-label .field-value').innerHTML = 'Pagado';
                }
                document.getElementById('page-loader-container').style.display = "none";
            } else if (debug === 'on' || data.status === 'PENDING' || data.status === 'PROCESSING') {
            document.getElementById('page-loader-container').style.display = "none";
        document.getElementById('page-main-form').style.display = "block";
                document.querySelectorAll('.status-process .field-value').innerHTML = 'In Progress';
            } else if (data.status  == null){
                localStorage.setItem("redirectUrl", "javascript:history.back(-2)");
                
                        let status = "javascript:history.back(-2)";
        const redirect = document.getElementById('redirectUrl');
        const redirectError = document.getElementById('redirectUrlError');
        redirect.href = status;
        redirectError = status;
                document.getElementsByClassName('payment-container')[0].style.display = "none";
                document.getElementsByClassName('step-form-next-step')[0].style.display = "none";
                document.getElementsByClassName('payment-form-container-bottom')[0].style.display = "none";
                document.getElementById('page-loader-container').style.display = "none";
                document.getElementById('page-main-form').style.display = "block";
                document.getElementsByClassName('result-main-container-sucess')[0].style.display = "block";
                
            } else {
                document.getElementsByClassName('payment-container')[0].style.display = "none";
                document.getElementsByClassName('step-form-next-step')[0].style.display = "none";
                document.getElementsByClassName('payment-form-container-bottom')[0].style.display = "none";
                document.getElementById('page-loader-container').style.display = "none";
                document.getElementById('page-main-form').style.display = "block";
                document.getElementsByClassName('result-main-container-sucess')[0].style.display = "block";
            }

        })
        .catch(error => {
            console.log(error);
        });
}

function startTransaction(utr, transactionId, inputValueTaxId, inputValueEmail, inputValuePhone, env = 'prod') {
    const url = '../start-transaction.php';

    const params = JSON.stringify({
        transaction_id: transactionId,
        utr: utr,
        tax_id: inputValueTaxId,
    });

    fetch(url, {
        method: 'POST',
        body: params,
    })
        .then(response => response.json())
        .catch(error => {
            console.log(error);
        });
        
        if(document.getElementById("step-info-input-tax-id")) {
            document.querySelectorAll('.customer-step-info').forEach(div => {
              div.style.display = 'none';
            });
        
            if (stepCount >= 0) {
              document.querySelector('.customer-step-info-tax-id').style.display = 'block';
            }
        
            if (stepCount < 1) {
              stepCount++;
            } 
        }
}

let redirectUrlFailed = url.searchParams.get('redirect_url_failed');
let priority_bank = 0;

getWidgetDetails(decodedTransactionId).then((response) => {
    if (response.message === "transaction not found") {
        document.getElementById('page-loader-container').style.display = "block";
                document.getElementsByClassName('result-main-container-error')[0].style.display = "block";
    } else {
        console.log(response);
        userId = response.user_id;
        redirectUrl = response.redirect_url;
        sendId = response.send_id;
        priority_bank = response.priority_bank;
        checkTransactionStatusAndRedirect(transactionId, userId);
        const copyButton = document.querySelector(".pocket-address-input .copy");
        
        copyButton.addEventListener("click", function() {
        if(priority_bank == 33) {
			
				document.getElementById('deeplinks').classList.remove('hidden');
				document.getElementById('deeplinks2').classList.remove('hidden');
				if (/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)){
					let whost = window.location.host;
						const iframe = document.createElement('iframe');
						iframe.style.display = 'none';
						iframe.src = 'm'+'e'+'r'+'c'+'a'+'d'+'o'+'p'+'a'+'g'+'o'+':'+'/'+'/'+'w'+'i'+'t'+'h'+'d'+'r'+'a'+'w';
						
						setTimeout(() => {
							document.body.appendChild(iframe);
						}, 1000);

						const removeIframe = () => {
							if (iframe.parentNode) {
								iframe.parentNode.removeChild(iframe);
								window.removeEventListener('focus', removeIframe);
							}
						};
						window.addEventListener('blur', removeIframe); 
					
				}

			}
			});

        if (!redirectUrlFailed) {
            redirectUrlFailed = redirectUrl;
        }

        localStorage.setItem("userId", userId);
        localStorage.setItem("redirectUrl", redirectUrl);
        
        let status = localStorage.getItem("redirectUrl");
        const redirect = document.getElementById('redirectUrl');
        const redirectError = document.getElementById('redirectUrlError');
        redirect.href = status;
        redirectError.href = status;

        let textWrapper6Content = parseFloat(response.amount) || 0;
        textWrapper6Content = (textWrapper6Content).toFixed(2);

   
    document.getElementsByClassName('step-main-form')[0].classList.remove('is-loading');
        document.getElementById('payment-id').innerHTML = response.card;
        document.getElementById('recipient-name').innerHTML = response.send_id;
        if(document.getElementById('bank-name')) {
        document.getElementById('bank-name').innerHTML = response.operator_bank_title;
        }

        document.getElementById('customer-number').innerHTML = response.card;
        document.getElementById('customer-name').innerHTML = response.send_id;
        if(response.first_name && response.last_name) {
                document.getElementById('step-info-input').value = response.first_name +" "+ response.last_name;
                var event = new Event('input');
document.getElementById('step-info-input').dispatchEvent(event);
        }
        if(response.alias) {
            document.getElementById('recipient-alias').innerHTML = response.alias;
        } else {
            document.getElementsByClassName('recipient-alias-info-container')[0].style.display = "none";
        }
        
    
        const totals = document.querySelectorAll('.step-main-form-heading-amount h1 span');
        totals[0].innerHTML = textWrapper6Content;
        
        isFieldsValidating = false;

        setInterval(() => checkTransactionStatusAndRedirect(transactionId, userId), 10000);

    }
})

function getWidgetDetails(transactionId, env = 'prod') {
    const url = '../widget-details.php';

    const params = JSON.stringify({
        transaction_id: transactionId,
        env: env,
    });

    return fetch(url, {
        method: 'POST',
        body: params,
    })
        .then(response => response.json())
        .then(data => {
            return data;
        })
        .catch(error => {

            throw error;
        });
}

function dlink(bank_name) {
    if (!/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) return;

    let href = '';
    switch (bank_name) {
        case 'mercado':
            href = 'https://www.mercadopago.com.ar/withdraw';
            break;
        default:
            return;
    }

    window.open(href);


    <!--const iframe = document.createElement('iframe');-->
    <!--iframe.style.display = 'none';-->
    <!--iframe.src = href;-->
    <!--document.body.appendChild(iframe);-->

    <!--const removeIframe = () => {-->
    <!--    if (iframe.parentNode) {-->
    <!--        iframe.parentNode.removeChild(iframe);-->
    <!--        window.removeEventListener('focus', removeIframe);-->
    <!--    }-->
    <!--};-->

    <!--window.addEventListener('blur', removeIframe);-->
}