/* ==========================================================================
    Password Preview

    Let the user allow to preview their filled in password.
    Of course only when there has been click on the button.  
 ========================================================================== */

const PasswordPreviewHandler = {

    elements: null,

    init : function()
    {
        // Get the form inputs
        PasswordPreviewHandler.elements = document.querySelectorAll('.js-password-preview');

        const nthOfElements = PasswordPreviewHandler.elements.length;
        for(let i = 0; i < nthOfElements; i++){

            const element = PasswordPreviewHandler.elements[i];
            const input = element.querySelector('.js-password-preview__input');
            const button = element.querySelector('.js-password-preview__button');

            if(isset(input) && isset(button)) {
                PasswordPreviewHandler.addEventListenersForPreview(element, input, button);
            }

        }
    },

    addEventListenersForPreview : function(element, input, button)
    {
        button.addEventListener('mouseup', function () {
            if(PasswordPreviewHandler.isPreviewEnabled(element)) PasswordPreviewHandler.disablePreview(element, input);
            else PasswordPreviewHandler.enablePreview(element, input);
        });
    },

    /**
     * Check if preview is enabled.
     *
     * @param element
     * @returns {boolean}
     */
    isPreviewEnabled: function(element) {
        return element.classList.contains('is-previewing');
    },

    /**
     * Enable preview
     *
     * @param element
     * @param input
     */
    enablePreview: function (element, input) {

        element.classList.add('is-previewing');

        input.type = 'text';
        input.focus();

        input.addEventListener('blur', function () {
            PasswordPreviewHandler.disablePreview(element, input);
        });
    },

    /**
     * Disable preview
     *
     * @param element
     * @param input
     */
    disablePreview: function (element, input) {
        element.classList.remove('is-previewing');
        input.type = 'password';
    },
};

PasswordPreviewHandler.init();