export default () => {
    // Get password visibility toggle HTMLElements
    const toggles = document.querySelectorAll('[data-action=toggle-password-visiblity]');

    /**
     * Changes the attributes, classes and hidden text needed to toggle a
     * passwords visibility.
     * 
     * @param {Object} event password visibility button click event
     */

    const togglePasswordVisibility = (event) => {
        event.preventDefault();

        // Get relevant HTMLElements
        const toggle = event.target;
        const input = toggle.closest('.form-group').querySelector('[data-role=password-input]');
        const label = toggle.querySelector('[data-role=button-label]');
        const icon = toggle.querySelector('.icon');

        // Store icon paths
        const eyeIcon = 'M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z';
        const eyeOffIcon = 'M9.9 4.24C10.5883 4.07888 11.2931 3.99834 12 4C19 4 23 12 23 12C22.393 13.1356 21.6691 14.2047 20.84 15.19M14.12 14.12C13.8454 14.4147 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.481 9.80385 14.1962C9.51897 13.9113 9.29439 13.5719 9.14351 13.1984C8.99262 12.8248 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2218 9.18488 10.8538C9.34884 10.4859 9.58525 10.1546 9.88 9.88M1 1L23 23M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.6819 3.96914 7.65661 6.06 6.06L17.94 17.94Z';

        // Check if the toggle and input exist
        if (!toggle || !input || !label) return false;

        if (toggle.getAttribute('data-password-visible') == 'false') {
            toggle.setAttribute('data-password-visible', 'true');
            input.setAttribute('type', 'text');
            icon.querySelector('path').setAttribute('d', eyeOffIcon);
            label.innerHTML = 'Hide password';
        } else {
            toggle.setAttribute('data-password-visible', 'false');
            input.setAttribute('type', 'password');
            icon.querySelector('path').setAttribute('d', eyeIcon);
            label.innerHTML = 'Show password';
        }
    }

    // Check if toggles exist
    if (!toggles) return false;
    
    toggles.forEach((toggle) => {
        toggle.addEventListener('click', (event) => {
            togglePasswordVisibility(event);
        })
    })
}