// Search
const _inforSelectSearch = {
  instances: {},
  container: null,
  search_index: null,
  get: (id) => {
    return _inforSelectSearch.instances[id];
  },
  instanceByContainer: container => {
    const id = container.attr('id');
    return _inforSelectSearch.instances[id];
  }
}
function initInforSelectSearch(){
  validateInforBase();

  $('infor-select-search').each((index, element) =>{
    const container = $(element);
    const initiated = container.attr('data-initiated');

    if(initiated){return true}

    const options = container.find('infor-select-option').detach();
    const actions = container.find('infor-select-action').detach();

    container.append(`
        <input data-infor-select-input-display readonly>
        <div data-clear > <i class="fa-solid fa-xmark"></i> </div>
        <input data-infor-select-input-hidden type="hidden">
        <div data-infor-select-options-container>
            <input data-infor-select-input-search placeholder="Zoeken" >
        </div>
    `);

    const options_container = container.find('[data-infor-select-options-container]');
    const input_display = container.find('[data-infor-select-input-display]');
    const input_hidden = container.find('[data-infor-select-input-hidden]');
    const hidden_attributes_container = container.find('infor-select-search-hidden-attr');

    const id = container.attr('id') || randomString(10);
    const name = container.attr('name');
    const disabled = container.attr('data-disabled');
    const livewire = container.attr('data-livewire');
    const livewire_params = container.attr('data-livewire-params');

    container.removeAttr('data-livewire');
    container.removeAttr('data-livewire-params');
    container.removeAttr('data-disabled');
    container.removeAttr('name');
    input_hidden.attr('name', name);

    const attributes = container.get(0).attributes;

    $.each(attributes, function () {
      input_display.attr(this.name, this.value);
    });
    while (attributes.length) {
      container.removeAttr(attributes[0].name);
    }

    const api = input_display.attr('data-api');
    const lazy = !!api;
    const search_api = input_display.attr('data-search-api');
    const search_key = input_display.attr('data-search-key') || 'ids';
    const response_key = input_display.attr('data-response-key');
    const value_key = input_display.attr('data-value') || 'id';
    const content = input_display.attr('data-content');
    const sub_content = input_display.attr('data-sub-content');
    const chunk_size = parseInt(input_display.attr('data-chunk-size')) || 20;
    const sort_by = input_display.attr('data-sort-by');
    const sort_type = input_display.attr('data-sort-type') || 'asc';
    const params_location = input_display.attr('data-params') || null;
    const error_callback = input_display.attr('data-errors');
    const preload = !!input_display.attr('data-preload');

    if(hidden_attributes_container.length){
      const hidden_attributes = hidden_attributes_container.get(0).attributes;
      $.each(hidden_attributes, function () {
        input_hidden.attr(this.name, this.value);
      });
      hidden_attributes_container.remove();
    }

    let selected_value = null;
    actions.each((index, action) => {
      action = $(action);

      options_container.append(`<div data-infor-select-action >${action.html()}</div>`)
    });
    options.each((index, option) => {
      option = $(option);

      const value = option.attr('data-value');
      const name = option.attr('data-name') || option.text();
      const params = option.attr('data-params');
      const classes = option.attr('class');
      const html = option.html();

      if(option.attr('data-selected') !== undefined){ selected_value = value; }

      options_container.append(`<div data-infor-select-option data-value="${value || ''}" data-name="${name || ''}" ${classes ? `class="${classes}"` : ''} ${parseInforElementParams(params)} >${html}</div>`)
    })

    container.attr('data-initiated', 'true');
    container.attr('id', id);

    _inforSelectSearch.instances[id] = {
      container: container,
      id: id,
      name: name,
      input: container.find('[data-infor-select-input-hidden]'),
      lazy: lazy,
      api: api,
      search_api: search_api,
      search_key: search_key,
      response_key: response_key,
      value_key: value_key,
      content: content,
      sub_content: sub_content,
      chunk_size: chunk_size,
      sort_by: sort_by,
      sort_type: sort_type,
      params_location: params_location,
      error_callback: error_callback,
      records: [],
      offset: 0,
      chunk_loading: false,
      chunk_finished: false,
      search_loading: false,
      search_active: false,
      search_timeout: null,
      pending_search: null,
      livewire: livewire,
      livewireEmit: value => {
        if(!livewire){ return }

        if(typeof Livewire !== 'object'){ return }

        if(typeof Livewire.emit === 'function'){
          Livewire.emit(livewire, parseInforLivewireParams({value}, livewire_params));
        }
        if(typeof Livewire.dispatch === 'function'){
          Livewire.dispatch(livewire, parseInforLivewireParams({value}, livewire_params));
        }
      },
      onchange: value => {},
      getValue: () => {
        const value = container.find('[data-infor-select-input-hidden]').val();
        const name = container.find(`[data-infor-select-option][data-value="${value}"]`).attr('data-name');
        return {
          name: name || '',
          value: value || '',
        }
      },
      setValue: value => {
        container.find(`[data-infor-select-option][data-value="${value}"]`).trigger('silent_click');
      },
      addValue : (options) => {
        let { name, value, html, params } = options;

        if(params){
          let params_string = '';
          for(const i in params){
            params_string += `data-${i}="${params[i]}" `
          }
          params = params_string;
        }

        container.find('[data-infor-select-options-container]').append(`
          <div data-infor-select-option data-value="${value || ''}" data-name="${name || ''}" ${params || ''} >${html || name}</div>
        `)
      },
      prefillValue: value => {
        const option = container.find(`[data-infor-select-option][data-value="${value}"]`);
        if(!option.length){ return }

        const name = option.attr('data-name');

        container.find('[data-infor-select-input-hidden]').val(value);
        container.find('[data-infor-select-input-display]').val(name);
      },
      clear_button: () => { return container.find('[data-clear]'); },
      input_hidden: () => { return container.find('[data-infor-select-input-hidden]') },
      input_display: () => { return container.find('[data-infor-select-input-display]') },
      input_search: () => { return container.find('[data-infor-select-input-search]') },
      options_container: () => { return container.find('[data-infor-select-options-container]') },
      options: () => { return container.find('[data-infor-select-option]') },
      visible_options: () => { return container.find('[data-infor-select-option]').not('[data-hide]') },
      focused_option: () => { return container.find('[data-infor-select-option][data-focused]') },
      disable: () => {
        container.attr('data-disabled', true);
      },
      enable: () => {
        container.removeAttr('data-disabled');
      },
      isActive: () => {
        const disabled = container.attr('data-disabled') === 'true';
        return !disabled;
      },
      clear: () => {
        const instance = _inforSelectSearch.get(id);

        const { input_hidden, input_display, clear_button, onchange, livewireEmit, isActive } = instance;

        if(!isActive()){ return; }

        clear_button().removeAttr('data-active');
        input_display().val('');
        input_hidden().val('').trigger('change');
        onchange(null);
        livewireEmit(null);
      }
    }

    const instance = _inforSelectSearch.get(id);
    if(selected_value){
      instance.prefillValue(selected_value);
    }
    if(disabled !== undefined && disabled !== 'false'){
      instance.disable();
    }
    if(lazy){
      instance.options_container().on('scroll', function(){
        const container_el = $(this);
        if(container_el.scrollTop() + container_el.innerHeight() >= container_el.prop('scrollHeight') - 50){
          fetchInforSelectSearchChunk(instance);
        }
      });
      if(preload){
        fetchInforSelectSearchChunk(instance);
      }
    }

  });
}

function inforSelectReformatContent(row, content){
  if(typeof window[content] == 'function'){
    return window[content](row);
  }

  const options = (content || '').split('||');

  for(let option of options){
    content = option.replaceAll(',', '');

    const option_keys = option.replaceAll(' ', '').split(',');
    for(const key of option_keys){ content = content.replace(key, (row[key] || '')); }

    if(content){ break; }
  }

  return content;
}
function appendInforSelectSearchOptions(instance, records){
  const { options_container, value_key, content, sub_content } = instance;

  for(const record of records){
    const value = record[value_key];
    if(value === undefined || value === null){ continue; }

    const existing = options_container().find(`[data-infor-select-option][data-value="${value}"]`);
    if(existing.length){
      existing.removeAttr('data-hide');
      continue;
    }

    instance.records.push(record);

    const name = inforSelectReformatContent(record, content) || '';
    const sub = inforSelectReformatContent(record, sub_content);

    const option = $('<div>', {
      'data-infor-select-option': '',
      'data-value': value,
      'data-name': name,
    }).html(sub ? `${name}<div data-infor-select-option-sub-content>${sub}</div>` : name);

    options_container().append(option);
  }
}
function extractInforSelectSearchResponse(instance, response){
  if(instance.response_key){
    if(response && typeof response === 'object' && !Array.isArray(response)){
      return response[instance.response_key] || [];
    }
    return [];
  }
  return Array.isArray(response) ? response : [];
}
function fetchInforSelectSearchChunk(instance){
  if(!instance.lazy || instance.search_active || instance.chunk_loading || instance.chunk_finished){ return; }

  const { options_container, params_location, error_callback } = instance;

  instance.chunk_loading = true;
  options_container().append(`<div data-infor-select-loading-more>Laden...</div>`);

  const params = _window(params_location, {});
  const data = {
    sort_type: instance.sort_type,
    offset: instance.offset,
    limit: instance.chunk_size,
    per_page: instance.chunk_size,
    page: Math.floor(instance.offset / instance.chunk_size) + 1,
  };
  if(instance.sort_by){ data.sort_by = instance.sort_by; }

  Object.assign(data, params);

  _ajax(instance.api, data)
      .then(response => {
        const records = extractInforSelectSearchResponse(instance, response);
        if(records.length){
          appendInforSelectSearchOptions(instance, records);
          instance.offset += records.length;
          if(records.length < instance.chunk_size){ instance.chunk_finished = true; }
        }
        else{
          instance.chunk_finished = true;
        }
      })
      .catch(err => {
        if(err?.status === 0){ return }
        const err_fn = _window(error_callback, function (e){console.log(e); }, false);
        err_fn(err);
      })
      .always(() => {
        instance.chunk_loading = false;
        options_container().find('[data-infor-select-loading-more]').remove();
      });
}
function fetchInforSelectSearchResults(instance, search_string){
  if(!instance.lazy){ return; }
  if(!search_string){ return; }
  if(!instance.search_api){ return; }
  if(instance.search_loading){
    instance.pending_search = search_string;
    return;
  }

  const { options_container, params_location, error_callback } = instance;

  instance.search_loading = true;
  instance.search_active = true;
  options_container().find('[data-infor-select-option]').attr('data-hide', true);
  options_container().append(`<div data-infor-select-loading-more>Laden...</div>`);

  const params = _window(params_location, {});

  _ajax(instance.search_api, Object.assign({search: search_string}, params))
      .then(response => {
        if(!Array.isArray(response) || !response.length){ return; }

        const ids = response
            .map(row => (row && typeof row === 'object') ? row[instance.value_key] : row)
            .filter(id => id !== undefined && id !== null);
        if(!ids.length){ return; }

        const data = {};
        data[instance.search_key] = ids;
        Object.assign(data, params);

        return _ajax(instance.api, data);
      })
      .then(response => {
        if(response){
          appendInforSelectSearchOptions(instance, extractInforSelectSearchResponse(instance, response));
        }
      })
      .catch(err => {
        if(err?.status === 0){ return }
        const err_fn = _window(error_callback, function (e){console.log(e); }, false);
        err_fn(err);
      })
      .always(() => {
        instance.search_loading = false;
        options_container().find('[data-infor-select-loading-more]').remove();

        if(instance.pending_search){
          const pending = instance.pending_search;
          instance.pending_search = null;
          fetchInforSelectSearchResults(instance, pending);
        }
      });
}

$(document).keydown(function(event){
  const { container, search_index } = _inforSelectSearch;

  if(!container){return;}

  const instance = _inforSelectSearch.instanceByContainer(container);
  const { visible_options, options_container, focused_option} = instance;
  const { key } = event;
  if(key != "ArrowUp" && key != "ArrowDown" && key != "Enter"){return;}

  visible_options().removeAttr('data-focused');

  if(event.key == "Enter"){
    event.preventDefault();
    event.stopPropagation();
    visible_options().eq(_inforSelectSearch.search_index).trigger('silent_click');
    return false;
  }
  if(event.key == 'ArrowDown'){
    if(search_index === null || search_index === (visible_options().length - 1)){ _inforSelectSearch.search_index = 0; }
    else{ _inforSelectSearch.search_index += 1; }
  }
  else if(event.key == 'ArrowUp'){
    if(search_index === null || search_index === 0){ _inforSelectSearch.search_index = (visible_options().length - 1); }
    else{ _inforSelectSearch.search_index += -1; }
  }


  visible_options().eq(_inforSelectSearch.search_index).attr('data-focused', true);

  const container_height = options_container().height();
  const scroll_offset = options_container().scrollTop();
  const top_offset = focused_option().position().top;
  const focused_option_height = (focused_option().outerHeight() / 2);

  if(top_offset > container_height){
    options_container().scrollTop(top_offset - container_height + scroll_offset + focused_option_height + 10);
  }
  else if(top_offset < 0){
    options_container().scrollTop(scroll_offset - Math.abs(top_offset) - 10);
  }
});
$(document).on('click', 'infor-select-search [data-infor-select-input-display]', function () {
  hideInforSelectables();
  const container = findContainerByTag('infor-select-search', this);
  const instance = _inforSelectSearch.instanceByContainer(container);

  const { input_search, options_container, options, isActive } = instance;

  if(!isActive()){ return; }

  options_container().css({display: 'block', width: container.outerWidth()});
  input_search().val('').focus();
  options().removeAttr('data-hide data-focused');
  instance.search_active = false;
  instance.pending_search = null;

  _inforSelectSearch.search_index = null;
  _inforSelectSearch.container = container;

  if(instance.lazy && !instance.records.length && !instance.chunk_loading && !instance.chunk_finished){
    fetchInforSelectSearchChunk(instance);
  }
});
$(document).on('click silent_click', 'infor-select-search [data-infor-select-option]', function () {
  const option = $(this);
  const container = findContainerByTag('infor-select-search', this);
  const instance = _inforSelectSearch.instanceByContainer(container);
  const { input_display, input_hidden, clear_button, onchange, livewireEmit } = instance;

  const content = option.attr('data-name');
  const value = option.attr('data-value');

  input_display().val(content)
  input_hidden().val(value).trigger('change');

  onchange(value);
  livewireEmit(value);

  clear_button().removeAttr('data-active');
  if(value){
    clear_button().attr('data-active', true);
  }

  hideInforSelectables();
});
$(document).on('input', 'infor-select-search [data-infor-select-input-search]', function (event) {
  const input = $(this);
  const words = input.val().toLowerCase().replaceAll(__infor_base.regex_ignore, '').split(' ');
  const container = findContainerByTag('infor-select-search', this);
  const instance = _inforSelectSearch.instanceByContainer(container);
  const { options } = instance;

  const { key } = event;
  if(key == 'ArrowUp' || key == 'ArrowDown'){ return; }

  if(instance.lazy){
    clearTimeout(instance.search_timeout);
    if(!input.val()){
      instance.search_active = false;
      instance.pending_search = null;
      options().removeAttr('data-hide data-focused');
      _inforSelectSearch.search_index = null;
      return;
    }
    instance.search_timeout = setTimeout(() => {
      fetchInforSelectSearchResults(instance, input.val());
    }, 200);
    return;
  }

  options().removeAttr('data-hide');
  if(!words.length){ return; }

  options().each((index, element) => {
    const option = $(element);
    const text = option.text().toLowerCase().replaceAll(__infor_base.regex_ignore, '');

    for(const word of words){
      if(text.includes(word)){ continue; }

      option.attr('data-hide', 'true');
    }
  })

  _inforSelectSearch.search_index = null;
  options().removeAttr('data-focused');
});
$(document).on('click', 'infor-select-search [data-clear]', function(){
  const container = findContainerByTag('infor-select-search', this);
  const instance = _inforSelectSearch.instanceByContainer(container);

  instance.clear();
});


// Multiple
const _inforSelectMultiple = {
  instances: {},
  container: null,
  search_index: null,
  get: (id) => {
    return _inforSelectMultiple.instances[id];
  },
  instanceByContainer: container => {
    const id = container.attr('id');
    return _inforSelectMultiple.instances[id];
  }
}
function initInforSelectMultiple(){
  validateInforBase();
  $('infor-select-multiple').each((index, element) =>{
    const container = $(element);
    const initiated = container.attr('data-initiated');

    if(initiated){return true}

    const options = container.find('infor-select-option').detach();
    const actions = container.find('infor-select-action').detach();

    container.append(`
        <input data-infor-select-input-display readonly>
        <div data-clear > <i class="fa-solid fa-xmark"></i> </div>
        <div data-infor-select-options-container>
            <div data-infor-actions-container >
              <input data-infor-select-input-search placeholder="Zoeken" >
              <a data-toggle-all>Toggle&nbsp;All</a>
            </div>
        </div>
    `);

    const options_container = container.find('[data-infor-select-options-container]');
    const input_display = container.find('[data-infor-select-input-display]');

    const id = container.attr('id') || randomString(10);
    const name = container.attr('name');
    const disabled = container.attr('data-disabled');
    const livewire = container.attr('data-livewire');
    const livewire_params = container.attr('data-livewire-params');

    container.removeAttr('data-livewire');
    container.removeAttr('data-livewire-params');
    container.removeAttr('name');
    container.removeAttr('data-disabled');

    const attributes = container.get(0).attributes;

    $.each(attributes, function () {
      input_display.attr(this.name, this.value);
    });
    while (attributes.length) {
      container.removeAttr(attributes[0].name);
    }

    actions.each((index, action) => {
      action = $(action);

      options_container.append(`<div data-infor-select-action >${action.html()}</div>`)
    });
    options.each((index, option) => {
      option = $(option);

      const value = option.attr('data-value');
      const display_name = option.attr('data-name') || option.text();
      const html = option.html();
      const params = option.attr('data-params');
      const selected = option.attr('data-selected') !== undefined;
      const locked = option.attr('data-locked') !== undefined;
      const classes = option.attr('class');
      option.removeAttr('data-value data-name data-selected');

      const attributes = option.get(0).attributes
      let attributes_string = '';
      for(const attr of attributes){
        attributes_string += `${attr.name}="${attr.value}" `;
      }

      options_container.append(`
        <label data-infor-select-option ${parseInforElementParams(params)} ${locked ? 'data-locked' : ''} ${classes ? `class="${classes}"` : ''} >
          <span data-infor-select-indicator ></span>
          <span data-infor-select-option-lock ><i class="fa-solid fa-lock"></i></span>
          ${html}
          <input data-infor-select-checkbox ${locked ? 'disabled' : ''} type="checkbox" data-name="${display_name || ''}" name="${name}[]" value="${value}" ${selected ? 'checked' : ''} ${attributes_string} >
        </label>`)
    })

    container.attr('data-initiated', 'true');
    container.attr('id', id);

    _inforSelectMultiple.instances[id] = {
      container: container,
      id: id,
      name: name,
      input: container.find('[data-infor-select-checkbox]'),
      livewire: livewire,
      toggle_state: false,
      livewireEmit: values => {
        if(!livewire){ return }

        if(typeof Livewire !== 'object'){ return }

        if(typeof Livewire.emit === 'function'){
          Livewire.emit(livewire, parseInforLivewireParams({values}, livewire_params));
        }
        if(typeof Livewire.dispatch === 'function'){
          Livewire.dispatch(livewire, parseInforLivewireParams({values}, livewire_params));
        }
      },
      onchange: value => {},
      onchangeOption: object => {},
      getValues: () => {
        return container.find('[data-infor-select-checkbox]:checked').map(function() {
          return {
            name: $(this).attr('data-name'),
            value: $(this).attr('value')
          };
        }).get();
      },
      setValues: (values, deselect_remaining = true) => {
        container.find('[data-infor-select-option]').each((index, element) => {
          const option = $(element);
          const locked = option.attr('data-locked') !== undefined;
          if(locked){ return true; }

          const input = option.find('[data-infor-select-checkbox]');
          const checked = input.is(':checked');
          const select = values.find(value => value == input.attr('value'));

          if( (select && !checked) || (!select && checked && deselect_remaining) ){
            input.prop('checked', !checked).trigger('change');
          }
        })
      },
      addValue : (options) => {
        const instance = _inforSelectMultiple.get(id);
        let {name, value, html, params, locked, selected } = options;

        if(params){
          let params_string = '';
          for(const i in params){
            params_string += `data-${i}="${params[i]}" `
          }
          params = params_string;
        }

        container.find('[data-infor-select-options-container]').append(`
          <label data-infor-select-option ${params || ''} ${locked ? 'data-locked' : ''} >
            <span data-infor-select-indicator ></span>
            <span data-infor-select-option-lock ><i class="fa-solid fa-lock"></i></span>
            ${html || options.name}
            <input data-infor-select-checkbox ${locked ? 'disabled' : ''} type="checkbox" data-name="${name || ''}" name="${instance.name}[]" value="${value}" ${selected ? 'checked' : ''} >
          </label>
        `);

        instance.refreshIndicators();
      },
      refreshIndicators: () => {
        let not_empty = false;

        const options = container.find('[data-infor-select-option]');
        options.each((index, element) => {
          const option = $(element);
          const checked = option.find('[data-infor-select-checkbox]').is(':checked');
          option.attr('data-infor-select-option', (checked ? 'active' : ''));

          if(checked){ not_empty = true; }
        });

        const names = container.find('[data-infor-select-checkbox]:checked').map(function() { return $(this).attr('data-name'); }).get();
        container.find('[data-infor-select-input-display]').val(names.join(', '));

        container.find('[data-clear]').removeAttr('data-active');
        if(not_empty){
          container.find('[data-clear]').attr('data-active', true);
        }
      },
      clear_button: () => { return container.find('[data-clear]'); },
      input_display: () => { return container.find('[data-infor-select-input-display]') },
      input_search: () => { return container.find('[data-infor-select-input-search]') },
      options_container: () => { return container.find('[data-infor-select-options-container]') },
      options: () => { return container.find('[data-infor-select-option]') },
      visible_options: () => { return container.find('[data-infor-select-option]').not('[data-hide]') },
      focused_option: () => { return container.find('[data-infor-select-option][data-focused]') },
      disable: () => {
        container.attr('data-disabled', true);
      },
      enable: () => {
        container.removeAttr('data-disabled');
      },
      isActive: () => {
        const disabled = container.attr('data-disabled') === 'true';
        return !disabled;
      },
      clear: () => {
        const instance = _inforSelectMultiple.get(id);
        const { setValues, getValues, clear_button, livewireEmit, isActive } = instance;

        if(!isActive()){ return; }

        clear_button().removeAttr('data-active');
        setValues([], true);
        livewireEmit(getValues());
      },
      selectAll(){
        const instance = _inforSelectMultiple.get(id);
        const { setValues, options } = instance;

        const values = [];

        options().each((index, element) => {
          const option = $(element);
          const input = option.find('[data-infor-select-checkbox]');
          const locked = option.attr('data-locked') !== undefined;
          if(locked){ return true; }

          values.push(input.attr('value'));
        })

        setValues(values);
      }

    }

    const instance = _inforSelectMultiple.get(id);
    instance.refreshIndicators();
    if(disabled !== undefined && disabled !== 'false'){
      instance.disable();
    }
  });
}

$(document).keydown(function(event){
  const { container, search_index } = _inforSelectMultiple;

  if(!container){return;}

  const instance = _inforSelectMultiple.instanceByContainer(container);
  const { visible_options, options_container, focused_option} = instance;
  const { key } = event;
  if(key != "ArrowUp" && key != "ArrowDown" && key != "Enter"){return;}

  if(event.key == "Enter"){
    event.preventDefault();
    event.stopPropagation();

    const checkbox = visible_options().eq(_inforSelectMultiple.search_index).find('[data-infor-select-checkbox]');
    const target_state = !checkbox.prop('checked');
    checkbox.prop('checked', target_state).trigger('change');
    return false;
  }

  visible_options().removeAttr('data-focused');
  if(event.key == 'ArrowDown'){
    if(search_index === null || search_index === (visible_options().length - 1)){ _inforSelectMultiple.search_index = 0; }
    else{ _inforSelectMultiple.search_index += 1; }
  }
  else if(event.key == 'ArrowUp'){
    if(search_index === null || search_index === 0){ _inforSelectMultiple.search_index = (visible_options().length - 1); }
    else{ _inforSelectMultiple.search_index += -1; }
  }


  visible_options().eq(_inforSelectMultiple.search_index).attr('data-focused', true);

  const container_height = options_container().height();
  const scroll_offset = options_container().scrollTop();
  const top_offset = focused_option().position().top;
  const focused_option_height = (focused_option().outerHeight() / 2);

  if(top_offset > container_height){
    options_container().scrollTop(top_offset - container_height + scroll_offset + focused_option_height + 10);
  }
  else if(top_offset < 0){
    options_container().scrollTop(scroll_offset - Math.abs(top_offset) - 10);
  }
});
$(document).on('click', 'infor-select-multiple [data-infor-select-input-display]', function () {
  hideInforSelectables();
  const container = findContainerByTag('infor-select-multiple', this);
  const instance = _inforSelectMultiple.instanceByContainer(container);

  const { input_search, options_container, options, isActive } = instance;

  if(!isActive()){ return; }

  options_container().css({display: 'block', width: container.outerWidth()});
  input_search().val('').focus();
  options().removeAttr('data-hide data-focused');

  _inforSelectMultiple.search_index = null;
  _inforSelectMultiple.container = container;

});
$(document).on('change', 'infor-select-multiple [data-infor-select-checkbox]', function () {
  const container = findContainerByTag('infor-select-multiple', this);
  const instance = _inforSelectMultiple.instanceByContainer(container);

  const { refreshIndicators, getValues, onchange, onchangeOption, livewireEmit } = instance;

  const name = $(this).attr('data-name');
  const value = $(this).attr('value');
  const checked = $(this).prop('checked');

  refreshIndicators();
  onchange(getValues());
  onchangeOption({ name: name, value: value, checked: checked });
  livewireEmit(getValues());
});
$(document).on('input', 'infor-select-multiple [data-infor-select-input-search]', function (event) {
  const input = $(this);
  const words = input.val().toLowerCase().replaceAll(__infor_base.regex_ignore, '').split(' ');
  const container = findContainerByTag('infor-select-multiple', this);
  const instance = _inforSelectMultiple.instanceByContainer(container);
  const { options } = instance;

  const { key } = event;
  if(key == 'ArrowUp' || key == 'ArrowDown'){ return; }

  options().removeAttr('data-hide');
  if(!words.length){ return; }

  options().each((index, element) => {
    const option = $(element);
    const text = option.text().toLowerCase().replaceAll(__infor_base.regex_ignore, '');

    for(const word of words){
      if(text.includes(word)){ continue; }

      option.attr('data-hide', 'true');
    }
  })

  _inforSelectMultiple.search_index = null;
  options().removeAttr('data-focused');
});
$(document).on('click', 'infor-select-multiple [data-clear]', function(){
  const container = findContainerByTag('infor-select-multiple', this);
  const instance = _inforSelectMultiple.instanceByContainer(container);
  instance.clear();
});
$(document).on('click', 'infor-select-multiple [data-toggle-all]', function(){
  const container = findContainerByTag('infor-select-multiple', this);
  const instance = _inforSelectMultiple.instanceByContainer(container);
  let { clear, selectAll, toggle_status, livewireEmit, getValues, options } = instance;

  //Switch action if,
  //current action is deselect na non options are selected, or
  //current action is select and all options are selected
  if( toggle_status && !getValues().length || !toggle_status && getValues().length == options().length){ console.log('toggle'); toggle_status = !toggle_status; }

  toggle_status ? clear() : selectAll();

  instance.toggle_status = !toggle_status;
  livewireEmit(getValues());
});

// Edit
const _inforSelectEdit = {
  instances: {},
  container: null,
  search_index: null,
  get: (id) => {
    return _inforSelectEdit.instances[id];
  },
  instanceByContainer: container => {
    const id = container.attr('id');
    return _inforSelectEdit.instances[id];
  }
}
function initInforSelectEdit(){
  validateInforBase();

  $('infor-select-edit').each((index, element) =>{
    const container = $(element);
    const initiated = container.attr('data-initiated');

    if(initiated){return true}

    const options = container.find('infor-select-option').detach();
    const actions = container.find('infor-select-action').detach();

    container.append(`
        <input data-infor-select-input-display autocomplete="off" >
        <div data-clear > <i class="fa-solid fa-xmark"></i> </div>
        <div data-infor-select-options-container></div>
    `);

    const options_container = container.find('[data-infor-select-options-container]');
    const input_display = container.find('[data-infor-select-input-display]');

    const id = container.attr('id') || randomString(10);
    const name = container.attr('name');
    const disabled = container.attr('data-disabled');
    const livewire = container.attr('data-livewire');
    const livewire_params = container.attr('data-livewire-params');
    const value = container.attr('data-value');

    container.removeAttr('data-livewire');
    container.removeAttr('data-livewire-params');
    container.removeAttr('data-value');
    container.removeAttr('data-disabled');

    const attributes = container.get(0).attributes;

    $.each(attributes, function () {
      input_display.attr(this.name, this.value);
    });
    while (attributes.length) {
      container.removeAttr(attributes[0].name);
    }

    actions.each((index, action) => {
      action = $(action);

      options_container.append(`<div data-infor-select-action >${action.html()}</div>`)
    });
    options.each((index, option) => {
      option = $(option);

      const value = option.attr('data-value') || option.text();
      const params = option.attr('data-params');
      const classes = option.attr('class');
      const html = option.html();

      options_container.append(`<div data-infor-select-option data-value="${value || ''}" ${classes ? `class="${classes}"` : ''} ${parseInforElementParams(params)} >${html}</div>`)
    })

    container.attr('data-initiated', 'true');
    container.attr('id', id);

    _inforSelectEdit.instances[id] = {
      container: container,
      id: id,
      name: name,
      input: container.find('[data-infor-select-input-hidden]'),
      livewire: livewire,
      livewireEmit: value => {
        if(!livewire){ return }
        if(typeof Livewire !== 'object'){ return }

        if(typeof Livewire.emit === 'function'){
          Livewire.emit(livewire, parseInforLivewireParams({value}, livewire_params));
        }
        if(typeof Livewire.dispatch === 'function'){
          Livewire.dispatch(livewire, parseInforLivewireParams({value}, livewire_params));
        }

      },
      onchange: value => {},
      getValue: () => {
        return  container.find('[data-infor-select-input-display]').val();
      },
      setValue: value => {
        const instance = _inforSelectEdit.get(id);

        instance.input_display().val(value);
        instance.onchange(value);
        instance.livewireEmit(value);
        instance.setClearButton();

        hideInforSelectables();
      },
      addValue : (options) => {
        let { value, html, params } = options;

        if(params){
          let params_string = '';
          for(const i in params){
            params_string += `data-${i}="${params[i]}" `
          }
          params = params_string;
        }

        container.find('[data-infor-select-options-container]').append(`<div data-infor-select-option data-value="${value || ''}" ${params || ''} >${html || value}</div>`)
      },
      setClearButton: () => {
        const instance = _inforSelectEdit.get(id);

        instance.clear_button().removeAttr('data-active');
        if(instance.getValue()){
          instance.clear_button().attr('data-active', true);
        }
      },
      prefillValue: value => {
        const option = container.find(`[data-infor-select-option][data-value="${value}"]`);
        if(!option.length){ return }

        const name = option.attr('data-name');

        container.find('[data-infor-select-input-hidden]').val(value);
        container.find('[data-infor-select-input-display]').val(name);
      },
      clear_button: () => { return container.find('[data-clear]'); },
      input_display: () => { return container.find('[data-infor-select-input-display]') },
      options_container: () => { return container.find('[data-infor-select-options-container]') },
      options: () => { return container.find('[data-infor-select-option]') },
      visible_options: () => { return container.find('[data-infor-select-option]').not('[data-hide]') },
      focused_option: () => { return container.find('[data-infor-select-option][data-focused]') },
      disable: () => {
        container.attr('data-disabled', true);
        container.find('[data-infor-select-input-display]').prop('readonly', true);
      },
      enable: () => {
        container.removeAttr('data-disabled');
        container.find('[data-infor-select-input-display]').prop('readonly', false);
      },
      isActive: () => {
        const disabled = container.attr('data-disabled') === 'true';
        return !disabled;
      },
      clear: () => {
        const instance = _inforSelectEdit.get(id);
        const { isActive, input_display } = instance;

        if(!isActive()){ return; }

        input_display().val('').trigger('change');
      }
    }

    const instance = _inforSelectEdit.get(id);
    if(disabled !== undefined && disabled !== 'false'){
      instance.disable();
    }
    if(value){
      instance.input_display().val(value);
    }
  });
}

$(document).keydown(function(event){
  const { container, search_index } = _inforSelectEdit;

  if(!container){return;}

  const instance = _inforSelectEdit.instanceByContainer(container);
  const { visible_options, options_container, focused_option} = instance;
  const { key } = event;
  if(key != "ArrowUp" && key != "ArrowDown" && key != "Enter"){return;}

  visible_options().removeAttr('data-focused');

  if(event.key == "Enter"){
    event.preventDefault();
    event.stopPropagation();
    visible_options().eq(_inforSelectEdit.search_index).trigger('silent_click');
    return false;
  }
  if(event.key == 'ArrowDown'){
    if(search_index === null || search_index === (visible_options().length - 1)){ _inforSelectEdit.search_index = 0; }
    else{ _inforSelectEdit.search_index += 1; }
  }
  else if(event.key == 'ArrowUp'){
    if(search_index === null || search_index === 0){ _inforSelectEdit.search_index = (visible_options().length - 1); }
    else{ _inforSelectEdit.search_index += -1; }
  }


  visible_options().eq(_inforSelectEdit.search_index).attr('data-focused', true);

  const container_height = options_container().height();
  const scroll_offset = options_container().scrollTop();
  const top_offset = focused_option().position().top;
  const focused_option_height = (focused_option().outerHeight() / 2);

  if(top_offset > container_height){
    options_container().scrollTop(top_offset - container_height + scroll_offset + focused_option_height + 10);
  }
  else if(top_offset < 0){
    options_container().scrollTop(scroll_offset - Math.abs(top_offset) - 10);
  }
});
$(document).on('click', 'infor-select-edit [data-infor-select-input-display]', function () {
  hideInforSelectables();
  const container = findContainerByTag('infor-select-edit', this);
  const instance = _inforSelectEdit.instanceByContainer(container);

  const { options_container, options, isActive } = instance;

  if(!isActive()){ return; }

  options_container().css({display: 'block', width: container.outerWidth()});
  options().removeAttr('data-hide data-focused');

  _inforSelectEdit.search_index = null;
  _inforSelectEdit.container = container;
});
$(document).on('click silent_click', 'infor-select-edit [data-infor-select-option]', function () {
  const option = $(this);
  const container = findContainerByTag('infor-select-edit', this);
  const instance = _inforSelectEdit.instanceByContainer(container);
  const { input_display } = instance;

  const value = option.attr('data-value');
  input_display().val(value).trigger('change');

});
$(document).on('input', 'infor-select-edit [data-infor-select-input-display]', function (event) {
  const value = this.value;
  const words = value.toLowerCase().replaceAll(__infor_base.regex_ignore, '').split(' ');
  const container = findContainerByTag('infor-select-edit', this);
  const instance = _inforSelectEdit.instanceByContainer(container);
  const { options, visible_options, options_container  } = instance;

  const { key } = event;
  if(key == 'ArrowUp' || key == 'ArrowDown'){ return; }

  //search
  options().removeAttr('data-hide');
  if(!words.length){ return; }
  options().each((index, element) => {
    const option = $(element);
    const text = option.text().toLowerCase().replaceAll(__infor_base.regex_ignore, '');

    for(const word of words){
      if(text.includes(word)){ continue; }

      option.attr('data-hide', 'true');
    }
  })

  //options
  _inforSelectEdit.search_index = null;
  options().removeAttr('data-focused');
  options_container().css({
    display: visible_options().length ? 'block' : '',
  });
});
$(document).on('change', 'infor-select-edit [data-infor-select-input-display]', function (event) {
  const value = this.value;
  const container = findContainerByTag('infor-select-edit', this);
  const instance = _inforSelectEdit.instanceByContainer(container);
  const { setValue } = instance;

  setValue(value, false)
});
$(document).on('click', 'infor-select-edit [data-clear]', function(){
  const container = findContainerByTag('infor-select-edit', this);
  const instance = _inforSelectEdit.instanceByContainer(container);
  instance.clear();
});

//Global
$(document).click(function(event) {
  if (!$(event.target).is('[data-infor-select-input-display], [data-infor-select-options-container] *')) {
    hideInforSelectables();
  }
});
$(document).on('click', '[data-infor-select-action]', hideInforSelectables);


function hideInforSelectables(){
  _inforSelectSearch.container = null;
  _inforSelectMultiple.container = null;
  _inforSelectEdit.container = null;
  $('[data-infor-select-options-container]').css({display: ''});
}
function validateInforBase(){
  if(typeof __infor_base === 'undefined'){
    throw new Error('Please include infor-base.js!');
  }
}


pageInteractive(() => {

  initInforSelectSearch();
  initInforSelectMultiple();
  initInforSelectEdit();

})