const _inforBarSelector = {
  instances: {},
  get: (id) => {
    return _inforBarSelector.instances[id];
  },
  instanceByContainer: container => {
    const id = container.attr('id');
    return _inforBarSelector.instances[id];
  }
}

function initInforBarSelector(){
  $('infor-bar-selector').each((index, element) => {
    const container = $(element);
    const id = container.attr('id') || randomString(10);
    const can_be_empty = container.attr('data-can-be-empty') !== undefined;
    const options = container.find('infor-bar-selector-option');

    const initiated = container.attr('data-initiated');
    if(initiated !== undefined){ return true; }

    if(!options.filter('[data-selected]').length){
      options.eq(0).attr('data-selected', '')
    }

    const option = options.filter('[data-selected]');

    if(!options.length && !can_be_empty){
      container.html('<infor-bar-selector-placeholder data-empty-bs >Geen Data</infor-bar-selector-placeholder>')
    }

    container.append(`<infor-bar-selector-indicator></infor-bar-selector-indicator>`)
    container.attr('id', id);
    container.attr('data-initiated', true);

    const indicator = container.find('infor-bar-selector-indicator');

    _inforBarSelector.instances[id] = {
      container: container,
      indicator: indicator,
      value: option.attr('data-value'),
      options: () => { return container.find('infor-bar-selector-option'); },
      onchange: (value) => {  },
      select: (value, trigger = true) => {
        selectInforBarOption(container.find(`infor-bar-selector-option[data-value=${value}]`), trigger)
      },
      selectEq: (index, trigger = true) => {
        selectInforBarOption(container.find(`infor-bar-selector-option`).eq(index), trigger)
      },
      values: () => {
        const arr = [];
        container.find('infor-bar-selector-option').each(function(){
          arr.push({
            name: $(this).text(),
            value: $(this).attr('data-value'),
          })
        })
        return arr;
      },
      removeValue: (value) => {
        container.find(`infor-bar-selector-option[data-value=${value}]`).remove();
        const options = container.find('infor-bar-selector-option');
        if(!options.length){
          container.html('<infor-bar-selector-placeholder data-empty-bs >Geen Data</div>')
        }
      },
      removeAllValues: () => {
        container.find(`infor-bar-selector-option[data-value`).remove();
        if(!options.length){
          container.html('<infor-bar-selector-placeholder data-empty-bs >Geen Data</div>')
        }
      },
      addValue: (options) => {
        const { name, value, classes} = options;
        if(!name || value === undefined || value === null){ return }

        container.find('[data-empty-bs]').remove();
        container.append(`<infor-bar-selector-option class="${classes || ''}" data-value="${value}">${name}</infor-bar-selector-option>`)
      }
    }
  });
}
function movePointerToOption(option){
  const container = findContainerByTag('infor-bar-selector', option);
  const instance = _inforBarSelector.instanceByContainer(container);

  const { options, indicator } = instance;

  const dimensions = {
    h: option.outerHeight(),
    w: option.outerWidth(),
    left: option.position().left + Number(option.css('margin-left').replace('px', '')) + container.scrollLeft(),
  }

  const {h, w, left} = dimensions;

  options().removeAttr('data-selected');
  option.attr('data-selected', '');

  if(left.toFixed(1) === Number(indicator.css('left').replace('px', '')).toFixed(1)){ return; }

  indicator.attr('style', `width: ${w}px; height: ${h}px; top: calc(50% - ${h / 2}px); left: ${left}px; transform: scaleX(1.1) scaleY(.9)`);
  setTimeout(() => {
    indicator.attr('style', `width: ${w}px; height: ${h}px; top: calc(50% - ${h / 2}px); left: ${left}px;`);
  }, 150)
}

function correctInforBarSelector(){
  $.each(_inforBarSelector.instances, (id, instance) => {
    instance.select(instance.value);
  })
}
function silentCorrectInforBarSelector(){
  $.each(_inforBarSelector.instances, (id, instance) => {
    instance.select(instance.value, false);
  })
}
function initialInforBarCorrection(){
  $.each(_inforBarSelector.instances, (id, instance) => {
    const trigger = instance.container.attr('data-trigger') !== 'false';
    instance.select(instance.value, trigger);
  })
}
function selectInforBarOption(option, trigger = true){
  const container = findContainerByTag('infor-bar-selector', option);
  const instance = _inforBarSelector.instanceByContainer(container);

  if(!instance){
    notification('Er is iets foutgegaan!');
    console.log(`Display select instance not found, see _inforBarSelector for more informations`);
    return;
  }

  movePointerToOption(option);

  instance.value = option.attr('data-value');
  if(trigger){
    instance.onchange(instance.value);
  }
}

$(document).on('click', 'infor-bar-selector-option', function(){
  const option = $(this);
  selectInforBarOption(option);
});

initInforBarSelector();
pageComplete(() => { setTimeout(initialInforBarCorrection, 50) });