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 records = document.querySelector('#records');
    const userMenu = document.querySelector('.dropdown-trigger');
    const userCaret = document.querySelector('#user-caret');

    const forVocabs = document.querySelector('#for-vocabs')
    const forRecords = document.querySelector('#for-records')
    
    if (forVocabs) {
        forVocabs.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');
            }
        });
    }

    if (forRecords) {
        forRecords.addEventListener('click', function () {
            records.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');
        if (userCaret.classList.contains('fa-caret-down')) {
            userCaret.classList.remove('fa-caret-down');
            userCaret.classList.add('fa-caret-up');
        } else {
            userCaret.classList.remove('fa-caret-up');
            userCaret.classList.add('fa-caret-down');
        }
    });
}