const html = require('choo/html');

import { setFileProtocolWssUrl, getFileProtocolWssUrl } from '../../app/api';

export default function preferences(state, emit) {
  const wssURL = getFileProtocolWssUrl();

  function updateWssUrl(event) {
    state.wssURL = event.target.value;
    setFileProtocolWssUrl(state.wssURL);
    emit('render');
  }

  function clickDone(event) {
    event.preventDefault();
    emit('pushState', '/');
  }

  return html`
    <body>
      <div id="white">
        <div id="preferences">
          <a onclick="${clickDone}" href="#"> done </a>
          <dl>
            <dt>wss url:</dt>
            <dd>
              <input type="text" onchange="${updateWssUrl}" value="${wssURL}" />
            </dd>
          </dl>
        </div>
      </div>
    </body>
  `;
}