import { widgetFactory, Helpers } from 'https://cdn.skypack.dev/@startinblox/core@0.14';
import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23';

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

export { HublStatus }