import { Utility } from '../../core/utility';

const PASSWORD_INITIALIZED_CLASS = 'password-input--initialized';

@Utility({
  selector: 'input[type="password"]:not([uw-no-password])',
})
export class Password {
  _element;
  _iconEl;
  _toggleContainerEl;
  
  constructor(element) {
    if (!element)
      throw new Error('Password utility cannot be setup without an element!');

    if (element.classList.contains(PASSWORD_INITIALIZED_CLASS))
      return false;

    this._element = element;

    this._element.classList.add('password-input__input');

    const siblingEl = this._element.nextSibling;
    const parentEl = this._element.parentElement;

    const wrapperEl = document.createElement('div');
    wrapperEl.classList.add('password-input__wrapper');
    wrapperEl.appendChild(this._element);

    this._toggleContainerEl = document.createElement('div');
    this._toggleContainerEl.classList.add('password-input__toggle');
    wrapperEl.appendChild(this._toggleContainerEl);

    this._iconEl = document.createElement('i');
    this._iconEl.classList.add('fas', 'fa-fw');
    this._toggleContainerEl.appendChild(this._iconEl);

    parentEl.insertBefore(wrapperEl, siblingEl);

    this._element.classList.add(PASSWORD_INITIALIZED_CLASS);
  }

  start() {
    this.updateVisibleIcon(this.isVisible());

    this._toggleContainerEl.addEventListener('mouseover', () => {
      this.updateVisibleIcon(!this.isVisible());
    });
    this._toggleContainerEl.addEventListener('mouseout', () => {
      this.updateVisibleIcon(this.isVisible());
    });
    this._toggleContainerEl.addEventListener('click', (event) => {
      event.preventDefault();
      event.stopPropagation();
      this.setVisible(!this.isVisible());
    });
  }

  isVisible() {
    return this._element.type !== 'password';
  }

  setVisible(visible) {
    this._element.type = visible ? 'text' : 'password';
    this.updateVisibleIcon(visible);
  }

  updateVisibleIcon(visible) {
    function visibleClass(visible) {
      return 'fa-' + (visible ? 'eye' : 'eye-slash');
    }

    this._iconEl.classList.remove(visibleClass(!visible));
    this._iconEl.classList.add(visibleClass(!!visible));
  }
}