import { delegate } from '@utils';

const PRIMARY_SELECTOR = 'select[data-secondary-options]';
const SECONDARY_SELECTOR = 'select[data-secondary]';
const CHAMP_SELECTOR = '.editable-champ';

delegate('change', PRIMARY_SELECTOR, (evt) => {
  const primary = evt.target;
  const secondary = primary
    .closest(CHAMP_SELECTOR)
    .querySelector(SECONDARY_SELECTOR);
  const options = JSON.parse(primary.dataset.secondaryOptions);

  selectOptions(secondary, options[primary.value]);
});
function makeOption(option) {
  let element = document.createElement('option');
  element.textContent = option;
  element.value = option;
  return element;
}
function selectOptions(selectElement, options) {
  selectElement.innerHTML = '';
  if (selectElement.required) {
    selectElement.appendChild(makeOption(''));
  }
  for (let option of options) {
    selectElement.appendChild(makeOption(option));
  }

  selectElement.selectedIndex = 0;
}