import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "mobileContents" ]

  connect() {
    document.addEventListener('click', this.resetBlur.bind(this))
  }
  

  toggleMobileMenu() {
    const cb = document.getElementById("nav-active")
    cb.checked = !cb.checked
    this.mobileContentsTarget.classList.toggle('nav__mobile__contents--visible')
  }

  resetBlur(event) {
    const el = this.mobileContentsTarget
    const target = event.target
    if (!this.element.contains(target)) {
      el.classList.remove('nav__mobile__contents--visible')
    } else if (target.tagName === "A") {
      const cb = document.getElementById("nav-active")
      cb.checked = false
      el.classList.remove('nav__mobile__contents--visible')
    }
  }
};