const html = require('choo/html');
const number = require('../../utils').number;

module.exports = function(selected, options, translate, changed) {
  const id = `select-${Math.random()}`;
  let x = selected;

  return html`
  <div class="selectbox">
    <div onclick=${toggle}>
      <span class="link">${translate(selected)}</span>
      <svg width="32" height="32">
        <polygon points="8 18 17 28 26 18" fill="#0094fb"/>
      </svg>
    </div>
    <ul id="${id}" class="selectbox__options">
      ${options.map(
        i => html`
            <li
              class="selectbox__option"
              onclick=${choose}
              data-value="${i}">${number(i)}</li>`
      )}
    </ul>
  </div>`;

  function close() {
    const ul = document.getElementById(id);
    const body = document.querySelector('body');
    ul.classList.remove('selectbox__options--active');
    body.removeEventListener('click', close);
  }

  function toggle(event) {
    event.stopPropagation();
    const ul = document.getElementById(id);
    if (ul.classList.contains('selectbox__options--active')) {
      close();
    } else {
      ul.classList.add('selectbox__options--active');
      const body = document.querySelector('body');
      body.addEventListener('click', close);
    }
  }

  function choose(event) {
    event.stopPropagation();
    const target = event.target;
    const value = +target.dataset.value;
    target.parentNode.previousSibling.firstElementChild.textContent = translate(
      value
    );
    if (x !== value) {
      x = value;
      changed(value);
    }
    close();
  }
};