import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static outlets = ['modal']

  result = null
  elemId = null
  input = null
  lastValue = ''
  connect (e) {
    console.log('connect asociable_inline')
    const that = this
    // ID único para identificar el campo y el modal
    this.input = this.element.querySelector('input[type=text]')
    this.elemId = Math.trunc(Math.random() * 1000000000)
    this.element.classList.add(`asociable-${this.elemId}`)
    this.result = document.createElement('div')
    this.result.setAttribute('id', `resultados-${this.elemId}`)
    this.result.classList.add('resultados-wrapper')
    this.input.parentNode.appendChild(this.result)
    this.input.parentNode.appendChild(this.result)
    this.element.querySelector('.pencil').onclick = (e) => {
      that.input.focus()
    }
    if (this.input.value) {
      this.element.classList.add('filled')
    }

    const debounce = function (callback, wait) {
      let timerId
      return (...args) => {
        clearTimeout(timerId)
        timerId = setTimeout(() => {
          callback(...args)
        }, wait)
      }
    }
    const doSearchBounce = debounce((force) => {
      that.doSearch(force)
    }, 200)

    this.input.addEventListener('blur', (e) => {
      this.input.placeholder = ''
    })
    this.input.onfocus = (e) => {
      this.input.select()
      if (this.input.value.length === 0) {
        this.escribiAlgo()
      }
    }
    this.input.onkeyup = (e) => {
      if (this.input.value.length === 0) {
        this.escribiAlgo()
      }
      if (e.keyCode === 13) {
        doSearchBounce(true)
      } else {
        doSearchBounce()
      }
    }
    this.input.onkeydown = (e) => {
      if (e.keyCode === 13) {
        e.preventDefault()
        return false
      }
    }
  }

  buscando () {
    this.result.innerHTML = `
<div class="resultados" tabindex="-1">
  <div class="fst-italic text-secondary">Buscando...</div>
</div>
`
  }

  escribiAlgo () {
    this.input.placeholder = 'Escribí algo para buscar'
  }

  doSearch (force = false) {
    if (!force && this.input.value.length < 3) {
      return
    }
    if (!force && this.input.value === this.lastValue) {
      return
    }
    this.lastValue = this.input.value

    const timerId = setTimeout(() => {
      this.buscando()
    }, 200)
    document.addEventListener('turbo:before-stream-render', function (e) {
      clearTimeout(timerId)
    })
    const url = `${this.input.dataset.url}?id=${this.elemId}`
    const form = document.createElement('form')
    form.setAttribute('method', 'post')
    form.setAttribute('action', url)
    form.setAttribute('data-turbo-stream', true)
    const partial = document.createElement('input')
    partial.setAttribute('type', 'hidden')
    partial.setAttribute('name', 'partial')
    partial.setAttribute('value', 'pg_associable/resultados_inline')
    form.appendChild(partial)
    const query = document.createElement('input')
    query.setAttribute('type', 'hidden')
    query.setAttribute('name', 'query')
    query.setAttribute('value', this.input.value)
    form.appendChild(query)
    document.body.prepend(form)
    form.requestSubmit()
    form.remove()
  }

  completarCampo (id, text) {
    const textField = this.element.querySelector('input[type=text]')
    const hiddenField = this.element.querySelector('input[type=hidden]')
    if (id === undefined) {
      id = null
    }
    hiddenField.value = id
    if (id) {
      textField.value = text
      this.element.classList.add('filled')
    } else {
      this.element.classList.remove('filled')
      textField.value = null
    }
  }

  selectItem (e) {
    console.log('select')
    // TODO: text en data
    this.completarCampo(e.target.dataset.id, e.target.text)
    this.result.innerHTML = ''
  }

  disconnect (e) {
    console.log('disconnect asociable_inline')
  }
}