const typeahead = new flotsam({
    // input element you want to attach to
    el: document.querySelector('input'),
    // static data formatted in an array, this is the data that will render on interaction
    data: ['lorem ipsum', 'lipsum', 'hello world', 'foo', 'bar', 'foo bar'],
});

let fetchController = new AbortController();
let fetchSignal = fetchController.signal;

const typeahead = new flotsam({
    // input element you want to attach to
    el: document.querySelector('input'),

    // textValue is the input/search value
    getData: (textValue) => {
        fetchController.abort();
        fetchController = new AbortController();
        fetchSignal = fetchController.signal;

        const url = new URL('http://fakejsonendpoints.dev.area17.com/api/autocomplete.php');
        const params = {
          q: textValue,
        };
        url.search = new URLSearchParams(params).toString();

        return fetch(
          url,
          {
            method: 'get',
            signal: fetchSignal,
            headers: {
              "Content-Type": "application/json",
              "Accept": "application/json",
              "X-Requested-With": "XMLHttpRequest",
            }
          }
        )
        .then(response => {
          try {
            return response.json();
          } catch(error) {
            console.log('json error:', error, response);
          }
        })
        .then(data => {
          // return data arr
          return data;
        })
        .catch(error => {
          console.log('fetch error:', error);
          return [];
        });
    }
});

const typeahead = new flotsam({
    el: document.querySelector('input'),
    data: [...data],

    // this sets the minimum count of input characters before we will render the box, defaults to 2
    minChars: 2,

    // when key-ing up or down, the input will fill with the previewed string
    // defaults to true
    inputPreview: true,

    // a11y instructions, defaults to:
    hint: 'When autocomplete results are available, use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.',

    // no results text, `::term::` is replaced with your search term
    noResultsText: 'Sorry there are no results for ::term:: please search again',

    // mark results in results, with `<mark>` tags, defaults to `true`
    markResults: true,

    // submit form on return key press, defaults to `true`
    submitOnReturn: true,
})

const typeahead = new flotsam({
    el: document.querySelector('input'),
    data: [...data],
});

typeahead.on('init', instanceData => {
    // flotsam init
});

typeahead.on('openModal', (instanceData) => {
    // modal opened
});

typeahead.on('closeModal', (instanceData) => {
    // modal closed
});

typeahead.on('selectKey', (instanceData) => {
    // selected item (with keyboard)
});

typeahead.on('resultClicked', (instanceData) => {
    // result clicked/return key pressed on selected result
});

typeahead.on('loadingData', (instanceData) => {
    // loading data
});

typeahead.on('loadedData', (instanceData) => {
    // loaded
});

typeahead.on('disabled', (instanceData) => {
    // flotsam disabled
});

const typeahead = new flotsam({
    el: document.querySelector('input'),
    data: [...data],
});

// force close the flotsom
typeahead.triggerClose();

// enables flotsom
typeahead.triggerEnable();

// disables flotsom
typeahead.triggerDisable();