import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.10/dist/widgets/widget-factory.js';
import { importCSS } from 'https://unpkg.com/@startinblox/core@0.10/dist/libs/helpers.js';
import SlimSelect from 'https://dev.jspm.io/slim-select@1.23';

const HublStatus = widgetFactory(
  'hubl-status',
  `<label>
    <div>\${label}</div>
    <select
      data-holder
      name="\${name}">
      <option
        value="Public"
        \${value=="Public" ? 'selected' : ''}>Public</option>
      <option
        value="Private"
        \${value=="Private" ? 'selected' : ''}>Privé</option>
    </select>
  </label>`,
  '',
  formWidget => {
    let select = formWidget.querySelector('select');
    if (!select) return;
    const slimSelect = new SlimSelect({select: select});
    importCSS('https://dev.jspm.io/slim-select/dist/slimselect.min.css');
    select.addEventListener('change', () => slimSelect.render());
  },
);

export { HublStatus }