var yo = require('yo-yo')
var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager

var modal = require('./modaldialog.js')

// -------------- styling ----------------------
var css = require('./styles/auto-complete-popup-styles')
// var cssModal = require('./styles/modaldialog-styles')

/* USAGE:

  var autoCompletePopup = new AutoCompletePopup({
    options: []
  })
  autoCompletePopup.event.register('handleSelect', function (input) { })
  autoCompletePopup.event.register('updateList', function () { })

*/

class AutoCompletePopup {
  constructor (opts = {}) {
    var self = this
    self.event = new EventManager()
    self.data = {
      _options: opts.options || []
    }
    self._view = {}
    self._startingElement = 0
    self._elementsToShow = 3
    self._removePopUp = this.resetCSSValuesModalContainer
  }

  resetCSSValuesModalContainer () {
    /*
    var modalContainer = document.querySelector(`.${cssModal.modal}`)
    modalContainer.style.display = 'none'
    var modalContent = document.querySelector(`.${css.modalContent}`)
    let newModalContent = modalContent ? document.querySelector(`.${css.modalContent}`) : document.querySelector(`.${cssModal.modalContent}`)
    newModalContent.className = cssModal.modalContent
    */
  }

  render () {
    var self = this
    var header = yo`<div class="${css.text}">Remix Commands</div>`
    self._view.autoComplete = yo`
      <div class="${css.popup}">
        <div>
          ${self.data._options.map((item, index) => {
            return yo`
              <div class="${css.listHandlerHide}">
                  <a value=${index}>
                    <div onclick=${handleSelect}>
                      ${Object.keys(item)[0]} 
                    </div>
                  </a>
                  <div>
                    ${Object.values(item)[0]}
                  </div>
                <hr/>
              </div>
            `
          })}
        </div>
        <div class="${css.listHandlerHide}">
          <button value=false onclick=${handleListIteration}>▲</button>
          <button value=true onclick=${handleListIteration}>▼</button>
          <div class="${css.pageNumberAlignment}">Page ${(self._startingElement / self._elementsToShow) + 1} of ${Math.ceil(self.data._options.length / self._elementsToShow)}</div>
        </div>
      </div>
    `
    function setUpPopUp () {
      handleOpenPopup()
      handleNagivationButtons()
      handleListSize()
    }

    function handleOpenPopup () {
      if (self.data._options.length > 1) {
        self._view.autoComplete.style.display = 'block'
        modal(header.innerText, self._view.autoComplete, {label: null},
          {
            fn: () => { self._removePopUp() }
          })
        editCSSValuesModalContainer()
      }
    }

    function handleSelect (event) {
      self._removePopUp()
      self._view.autoComplete.style.display = 'none'
      self.event.trigger('handleSelect', [event.srcElement.innerText])
    }

    function handleNagivationButtons () {
      if (self.data._options.length > self._elementsToShow) {
        self._view.autoComplete.children[1].className = css.listHandlerButtonShow
      }
    }

    function handleListSize () {
      if (self.data._options.length >= self._startingElement) {
        for (let i = self._startingElement; i < (self._elementsToShow + self._startingElement); i++) {
          if (self._view.autoComplete.children[0].children[i]) {
            self._view.autoComplete.children[0].children[i].className = css.listHandlerShow
          }
        }
      }
    }

    function handleListIteration (event) {
      if (event.srcElement.value === 'true' || event.which === 40) {
        if ((self._startingElement + self._elementsToShow) < self.data._options.length) {
          self._startingElement += self._elementsToShow
        }
      } else {
        if (self._startingElement > 0) {
          self._startingElement -= self._elementsToShow
        }
      }
      self.event.trigger('updateList')
    }

    function editCSSValuesModalContainer () {
      /*
      var modalContent = document.querySelector(`.${cssModal.modalContent}`)
      let newModalContent = modalContent ? document.querySelector(`.${cssModal.modalContent}`) : document.querySelector(`.${css.modalContent}`)
      newModalContent.className = css.modalContent
      */
    }

    setUpPopUp()
    return self._view
  }

}

module.exports = AutoCompletePopup
