import '../../vendor/murph/murph-core/src/core/Resources/assets/js/admin.js'

const Sortable = require('sortablejs').Sortable
const Routing = require('../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js')
const routes = require('../../public/js/fos_js_routes.json')

Routing.setRoutingData(routes)

class AddressAutocomplete {
  constructor () {
    this.fields = {
      address: document.querySelector('#establishment_address'),
      zipCode: document.querySelector('#establishment_zipCode'),
      city: document.querySelector('#establishment_city')
    }

    this.results = []
    this.timer = null

    if (!this.fields.address) {
      return
    }

    const that = this

    this.fields.address.addEventListener('keyup', () => {
      if (that.timer) {
        clearTimeout(that.timer)
      }

      that.timer = setTimeout(() => {
        const query = that.fields.address.value

        fetch(Routing.generate('admin_establishment_address', {
          q: query
        }))
          .then(response => response.json())
          .then((data) => {
            that.results = data.features
            that.renderResults()
          })
      }, 500)
    })
  }

  renderResults () {
    const address = this.fields.address
    const that = this

    let wrapper = address.nextSibling

    if (wrapper) {
      wrapper.remove()
    }

    if (this.results.length === 0) {
      return
    }

    wrapper = document.createElement('div')
    wrapper.classList.add('list-group', 'mt-1', 'mb-1')

    for (const address of this.results) {
      const item = document.createElement('div')
      item.classList.add('list-group-item', 'btn', 'text-left')
      item.textContent = address.properties.label

      item.setAttribute('data-name', address.properties.name)
      item.setAttribute('data-zipCode', address.properties.postcode)
      item.setAttribute('data-city', address.properties.city)

      item.addEventListener('click', (e) => {
        that.fields.address.value = e.target.getAttribute('data-name')
        that.fields.zipCode.value = e.target.getAttribute('data-zipCode')
        that.fields.city.value = e.target.getAttribute('data-city')

        wrapper.remove()
      })

      wrapper.appendChild(item)
    }

    address.parentNode.appendChild(wrapper)
  }
}

class FilesCollectionSorter {
  constructor () {
    const collections = document.querySelectorAll('div[data-collection^="collection-files"]')

    for (const collection of collections) {
      return new Sortable(collection, {
        handle: '*[data-collection-item]',
        sort: true,
        animation: 150,
        fallbackTolerance: 3,
        onEnd: (e) => {
          const positions = collection.querySelectorAll('*[data-collection-item] input[type=hidden]')
          console.log(positions);

          for (let u = 0; u < positions.length; u++) {
            positions[u].value = u
          }
        }
      })
    }
  }
}

new AddressAutocomplete()
new FilesCollectionSorter()