import './bootstrap.js';
/*
 * Welcome to your app's main JavaScript file!
 *
 * This file will be included onto the page via the importmap() Twig function,
 * which should already be in your base.html.twig.
 */
import './styles/app.css';

function showPasswd(selector) {
    const icon = document.querySelector(selector);
    const pwInput = document.querySelector('#pass-field');

    icon.addEventListener('click', function () {
        if (pwInput.getAttribute('type') === 'password') {
            this.firstElementChild.classList.remove('fa-eye-slash');
            this.firstElementChild.classList.add('fa-eye');
            pwInput.setAttribute('type', 'text');
        } else {
            this.firstElementChild.classList.remove('fa-eye');
            this.firstElementChild.classList.add('fa-eye-slash');
            pwInput.setAttribute('type', 'password');
        }
    });
}

console.log('whatever');

if (location.pathname.includes('login')) {
    showPasswd('#show-pw');

    document.querySelector('#submit > button').addEventListener('click', function () {
        this.parentElement.classList.add('is-loading');
    });

    const error = document.querySelector('.is-danger');

    if (error) {
        error.querySelector('.delete').addEventListener('click', () => {
            error.classList.add('is-hidden');
        });
    }
}

if (! location.pathname.includes('login')) {
    const vocabs = document.querySelector('#vocabs');
    const userMenu = document.querySelector('.dropdown-trigger');

    document.querySelector('#for-vocabs').addEventListener('click', function () {
        vocabs.classList.toggle('is-hidden');

        if (this.firstElementChild.classList.contains('fa-angle-right')) {
            this.firstElementChild.classList.remove('fa-angle-right');
            this.firstElementChild.classList.add('fa-angle-down');
        } else {
            this.firstElementChild.classList.remove('fa-angle-down');
            this.firstElementChild.classList.add('fa-angle-right');
        }
    });

    userMenu.addEventListener('click', function () {
        document.querySelector('.dropdown').classList.toggle('is-active');
    });
}