class SendPasswordMailButton {
    /**
     * Validates password fields.
     * The password fields values wil be imploded with a pipe symbol
     *
     * @param {HTMLDivElement} wrapper The wrapper div / element that wraps the button.
     */
    constructor(wrapper) {
        this.wrapper = wrapper;

        this.csrfTokenContainer = document.querySelector('meta[name="csrf-token"]');
        if(!this.csrfTokenContainer) {
            console.error('PasswordController: could not find the csrf token container. Password controller does not work');
            return;
        }

        this.mailButtonWrapper = this.wrapper.querySelector('.js_password_mail');
        if(!this.mailButtonWrapper) {
            console.error('PasswordController: could not find the wrapper that holds a button to mail the user instructions on how to set his password. Password controller does not work');
            return;
        }

        this.mailButton = this.mailButtonWrapper.querySelector('button');
        if(!this.mailButton || !("url" in this.mailButton.dataset) || !("userId" in this.mailButton.dataset)) {
            console.error('PasswordController: Could not find a button within the mail button wrapper, that has the data attributes url and user-id. Password controller does not work.');
            return;
        }
        this.mailButtonUrl = this.mailButton.dataset.url;
        this.mailButtonUserId = this.mailButton.dataset.userId;

        this.mailConfirmation = this.mailButtonWrapper.querySelector('p.js_confirmation');
        if(!this.mailConfirmation) {
            console.error('PasswordController: Could not find a paragraph with class js_confirmation. Password controller does not work.');
            return;
        }

        this.mailFailMessage = this.mailButtonWrapper.querySelector('p.js_fail');
        if(!this.mailFailMessage) {
            console.error('PasswordController: Could not find a paragraph with class js_fail. Password controller does not work.');
            return;
        }

        this.mailButtonClicked = this.mailButtonClicked.bind(this); //Needed to make sure that "this" inside the method always refers to the password controller.
        this.activateListeners(true);
    }

    /**
     * Activates listening for keyup events on the password fields to that the passwordChanged method is triggered
     *
     * @param state
     */
    activateListeners(state) {
        if (state) {
            this.mailButton.addEventListener('click', this.mailButtonClicked);
        } else {
            this.mailButton.removeEventListener('click', this.mailButtonClicked);
        }
    }

    /**
     * Triggered when the mail set password button was clicked.
     *
     * @var {MouseEvent} mouseEvent
     */
    mailButtonClicked(mouseEvent)
    {
        let self = this;
        mouseEvent.preventDefault();
        let request = new XMLHttpRequest();
        request.open("POST", this.mailButtonUrl, true);

        //Send the proper header information along with the request
        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        request.setRequestHeader("X-CSRF-TOKEN", this.csrfTokenContainer.getAttribute('content'));
        request.setRequestHeader("X-Requested-With", 'XMLHttpRequest');

        request.onreadystatechange = (function(passwordController, originalRequest) {
            return function() {
                if(this.readyState === XMLHttpRequest.DONE) {
                    if ((this.status === 200) || this.status === 204) {
                        passwordController.mailSend();
                    } else {
                        passwordController.mailError();
                    }
                }
            };
        }(self, request));

        this.mailButton.classList.add('hidden');
        request.send("user_id="+this.mailButtonUserId);
    }

    /**
     * Triggered when the user could not be mailed the set password mail for some reason.
     */
    mailError()
    {
        this.mailFailMessage.classList.remove('hidden');
    }

    /**
     * Triggered when the user did get a set password mail.
     */
    mailSend()
    {
        this.mailConfirmation.classList.remove('hidden');
    }
}