import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "emailField", "editEmailButton" ]
  static values = { validationFailed: Boolean }

  connect () {
    if (this.validationFailedValue) return;

    this.emailFieldTarget.disabled = true;
    this.element.querySelectorAll(".initial-hidden").forEach(el => {
      el.classList.add("hidden");
    })
    this.element.querySelectorAll(".initial-visible").forEach(el => {
      el.classList.remove("hidden");
    })
  }

  editEmail (evt) {
    this.emailFieldTarget.disabled = false;
    this.emailFieldTarget.select();
    this.editEmailButtonTarget.classList.add("hidden");
    this.element.querySelectorAll(".initial-hidden").forEach(el => {
      el.classList.remove("hidden");
    })
  }
}