import { Controller } from 'stimulus';

/*
 * This is an example Stimulus controller!
 *
 * Any element with a data-controller="default" attribute will cause
 * this controller to be executed. The name "default" comes from the filename:
 * default_controller.js -> "default"
 *
 * Delete this file or adapt it for your use!
 */
export default class extends Controller {
    connect() {
        var eye = document.createElement('i');
        eye.setAttribute('aria-hidden', true);
        eye.classList = 'fa fa-eye-slash'; //fa-eye
        eye.style.position = 'absolute';
        eye.dataset.action = 'click->passwordShow#toggle'
        eye.style.top = '10px';
        eye.style.right =  '10px';

        this.element.style.position = 'relative';
        this.element.append(eye);
    }

    toggle() {
        var btn = this.element.querySelector('input');
        var eye = this.element.querySelector('i');

        if (eye.classList.contains('fa-eye-slash')) {
            eye.classList = 'fa fa-eye';
            btn.type = 'text';
        } else {
            eye.classList = 'fa fa-eye-slash';
            btn.type = 'password';
        }
    }
}