import { SearchBuddy } from 'search-buddy';

let searchBuddy = SearchBuddy({
    items: [
        { title: "Settings", path: "/settings", icon: "🛠️" },
        { title: "Users", path: "/users", icon: "👥️" }
    ],
    keyShortcut: "doubleShiftLeft",
});

// optionally: you can also bind click events to searchBuddy.show
document.querySelector("#search-btn").addEventListener("click", searchBuddy.show);

import 'search-buddy/dist/esm/index.css'

SearchBuddy({
  /**
   * The URL the user will be redirected to if there are no results
   * and the user clicks Enter. The search value will be appended to this URL.
   * 
   * @example: "/search?query="
   */
  fallbackSearchUrl: null,

  /**
   * It can be an array or an async function. 
   * 
   * @example [ {title: "Page", path: "/page", } ]
   * or
   * @example async () => {
            return new Promise((resolve, reject) => {
                // call your API
            })
        }
   */
  items: [],
  /**
   * Key shortcut used to activate search-buddy.
   * There is a naming convention. If you want to listen for a double click,
   * then use "double[keyCode]" where [keyCode] is the code of the key.
   * In case you want to use two key press event,
   * use the key code separated by a plus sign.
   *
   * Key codes: https://w3c.github.io/uievents/#dom-keyboardevent-code
   *
   * @example "doubleShiftLeft"
   * @example "doubleEscape"
   * @example "Ctrl+/"
   */
  keyShortcut: null,
  /**
   * The maximum number of items rendered in search box.
   */
  maxResults: 25,
  /**
   * The placeholder for search input.
   */
  placeholder: "Start typing...",
  /**
   * Flag to enable saving results to sessionStorage.
   * It is especially useful when loading items via API.
   */
  stateSave: false,
  /**
   * The time threshold (ms) for double clicks.
   * It is used only if keyShortcut is passed.
   */
  threshold: 1000,
  /**
   * Show/hide emojis.
   */
  withIcons: true,
})

// Let's create an instance
const searchBuddy = SearchBuddy(options);

/**
 * Reference to DOM element
 */
searchBuddy.container

/**
 * Manually opens a container
 */
searchBuddy.show()

/**
 * Manually hides a container
 */
searchBuddy.hide()

/**
 * Manually destroys DOM elements and removes all event listeners 
 */
searchBuddy.destroy()

SearchBuddy({
    items: async () => { /* ... */ },
    stateSave: true, // <-- enable cache with sessionStorage
    keyShortcut: "doubleShiftLeft",
});

SearchBuddy({
    keyShortcut: "doubleShiftLeft",
    stateSave: true,
    items: async () => {
        const getData = () => {
            return fetch('/api/search-buddy-items.json')
                .then(response => response.json())
                .then(data => data);
        };
        return new Promise((resolve, reject) => {
            resolve(getData());
        });
    },
});