import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="removals"
export default class extends Controller {
  static values = {
    statusText: String
  }

  connect() {    
    // console.info(this.tagIdsValue)
    // console.info(this.updateUrlValue)

  }

  replaceWithStatus(event) {
    this.element.innerText = this.statusTextValue;
  }

  changeDataN() {
    // console.info(this.element.selectedOptions[0])

    const context = this.element.closest('.context-container')
    context.setAttribute('data-n', this.element.selectedOptions[0].getAttribute('data-n'))
  }

  disableScroll(){
    document.body.style.overflow = 'hidden'
  }

  enableScroll(){
    document.body.style.overflow = 'auto'
  }


  toogleSearchFilters(event) {    
    document.getElementById('search-filters').classList.toggle('open')
  }

  setCurrent(event) {
    this.element.querySelector('.current').classList.remove('current')
    event.currentTarget.closest('.node-attachment').classList.add('current') 
  }

  closeOverlay(event){  
    // console.log(event);
    if (event.target == this.element || event.target.getAttribute('data-action') == 'click->utils#closeOverlay') {
      this.closeOverlayAndEnableScroll()
    }
  }

  closeOverlayAndEnableScroll() {
    const overlay = document.getElementById('overlay')
      if (overlay) {
        this.enableScroll()
        overlay.remove();
      }
  }

  

  remove() {
    this.element.remove()
  }

  toggleDisabled() {
    const elements = this.element.querySelectorAll('select, input')
 
    elements.forEach(child => {
      child.disabled = !child.disabled;      
    })
  }


  
}