import { isset } from "../global/helpers";

/* ==========================================================================
    Mollie Form handler

    This handler hides the form and shows a create payment message
 ========================================================================== */

import ScrollToHandler from "./scrollToHandler";

const MollieFormHandler = {

    mollieForms: [],
    mollieLoadingMessage: null,
    scrollToMollieLoading: 400,

    init : function()
    {
        // Get the form inputs
        MollieFormHandler.mollieForms = document.querySelectorAll('.mollie-form');
        MollieFormHandler.mollieLoadingMessage = document.querySelector('.mollie-loading');


        const mollieFormsLength = MollieFormHandler.mollieForms.length;
        for(let i = 0; i < mollieFormsLength; i++){
            MollieFormHandler.interveneSubmit(MollieFormHandler.mollieForms[i]);
        }
    },

    interveneSubmit: function(mollieForm)
    {
        // Check that the form is really a form
        if(mollieForm.tagName === 'FORM'){
            mollieForm.addEventListener('submit', function(event){
                event.preventDefault();

                // Disable the form
                mollieForm.classList.add('is-disabled');

                // Show loading message if append to the view
                if(isset(MollieFormHandler.mollieLoadingMessage)){
                    MollieFormHandler.mollieLoadingMessage.classList.add('is-visible');

                    ScrollToHandler.duration = MollieFormHandler.scrollToMollieLoading;
                    ScrollToHandler.prepareScrollTo(MollieFormHandler.mollieLoadingMessage.id, false);
                }

                setTimeout(function () {

                    // Submit the form as normal
                    mollieForm.submit();

                // Wait till the mollie loading screen is positioned
                }, MollieFormHandler.scrollToMollieLoading);

            });
        }

    },
};

export default MollieFormHandler;