document.addEventListener('DOMContentLoaded', function () {
    let webCheckoutWidget = {

        env: {
            baseUrl: null
        },
        checkoutForms: null,
        modal: null,
        paymentUrl: null,

        init() {
            this.setEnvVars();
            this.loadButtonStyles();

            this.checkoutForms = document.querySelectorAll('form[gateway-webcheckout-widget]');
            this.render();
        },

        setEnvVars() {
            let webcheckoutScript = document.querySelector('script[src*="widgets/assets/web-checkout-js"]');
            this.env.baseUrl = webcheckoutScript.getAttribute('src').split('widgets/assets/web-checkout-js')[0];
        },

        loadButtonStyles() {
            let link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = this.env.baseUrl + 'widgets/webcheckout/css/buttons.css';

            document.head.appendChild(link);
        },

        async render() {
            let self = this;

            for (let e of self.checkoutForms) {
                e.innerHTML = await self.setCheckoutButton(e);
            }

            self.setCheckoutEvents();
        },

        async setCheckoutButton(parentForm) {
            let buttonVariation = parentForm.getAttribute('button-variation') ?? '1';

            let response = await fetch(this.env.baseUrl + 'widgets/assets/web-checkout-button/' + buttonVariation);

            if (!response.ok) {
                throw new Error('Error loading webcheckout button');
            }

            let html = await response.text();
            return html;


            /*
            let checkoutButton = document.createElement('button');
            checkoutButton.textContent = parentForm.getAttribute('button-text');
            checkoutButton.type = "submit";
            checkoutButton.classList.add('gateway-checkout-button');
            return checkoutButton;
            */
        },

        async setCheckoutEvents() {
            let self = this;
            this.checkoutForms.forEach((e) => {
                e.addEventListener('submit', async (event) => {
                    event.preventDefault();
                    await self.initPayment(event.target);
                    self.makeModal();
                });
            });
        },

        async initPayment(form) {
            let data = {
                account_key: form.getAttribute('account-key'),
                signature: form.getAttribute('signature'),
                is_subscription: form.getAttribute('is_subscription'),
                subscription_plan_id: form.getAttribute('subscription_plan_id'),
                client_email: form.getAttribute('client_email'),
                value: form.getAttribute('value'),
                reference: form.getAttribute('reference'),
                timestamp: form.getAttribute('timestamp'),
                description: form.getAttribute('description'),
                redirect_url: form.getAttribute('redirect-url') ?? location.href,
            };

            let options = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            };

            let response = await fetch(this.env.baseUrl + 'widgets/web-checkout/init', options);
            if (!response.ok) {
                alert('Security error: signature does not match');
                throw new Error('No fue posible inicializar la transacción');
            }

            let result = await response.json();

            this.paymentUrl = result.url;

            return result;
        },

        makeModal() {
            let body = document.querySelector('body');
            let modal = document.createElement('div');

            modal.style.position = 'fixed';
            modal.style.width = '100%';
            modal.style.height = '100%';
            modal.style.top = '0px';
            modal.style.left = '0px';
            modal.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
            modal.style.display = 'flex';
            modal.style.justifyContent = 'center';
            modal.style.justifyItems = 'center';
            modal.style.zIndex = 999;

            let iframeContainer = document.createElement('div');
            iframeContainer.style.display = 'flex';
            iframeContainer.style.width = '80%';
            iframeContainer.style.backgroundColor = '#fff';
            iframeContainer.style.marginTop = '20px';
            iframeContainer.style.marginBottom = '20px';
            iframeContainer.style.borderRadius = '12px';
            iframeContainer.style.boxShadow = 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px';
            iframeContainer.style.overflow = 'hidden';


            let iframe = document.createElement('iframe');
            iframe.src = this.paymentUrl + '?disableSideBar=1'
            iframe.width = "102%";
            iframe.style.border = 0;
            iframe.style.borderRadius = '12px';

            iframeContainer.append(iframe);

            body.appendChild(modal);

            modal.appendChild(iframeContainer);

            modal.addEventListener('click', function (e) {
                modal.remove();
            });
        }

    }

    webCheckoutWidget.init();
})