import { Controller } from '@hotwired/stimulus';

/**
 * Show / hide items in left-hand menu
 * [template: data_entry.html.twig]
 */
export default class extends Controller {
    static targets = ['vocabs', 'records'];

    toggle(event) {
        if (event.currentTarget.id === 'for-vocabs') {
            this.vocabsTarget.classList.toggle('is-hidden');
        }

        if (event.currentTarget.id === 'for-records') {
            this.recordsTarget.classList.toggle('is-hidden');
        }

        const icon = event.currentTarget.firstElementChild;
        const iconState = icon.className.includes('right') ? 'right' : 'down';

        const iconAction = {
            'right': function() {
                icon.className = icon.className.replace('right', 'down');
            },
            'down': function() {
                icon.className = icon.className.replace('down', 'right');
            }
        };

        iconAction[iconState]();
    }
}