export function getElements(dataType, dataValue, props = {}) {
  // props: { additionalDataFilters: [key, value][], additionalPropertyFilters: [key, value][] }

  const queryString = [
    ...[[dataType, dataValue], ...(props.additionalDataFilters ?? [])]
          .map(([k, v]) => [`data-${k}`, v]),
    ...(props.additionalPropertyFilters ?? []),
  ].map(([k, v]) => v === '*' ? `[${k}]` : `[${k}='${v}']`).join("");
  return document.querySelectorAll(queryString);
}

export function addEventToElement(dataType, dataValue, event, callback, props = {}) {
  getElements(dataType, dataValue, props).forEach(e => e.addEventListener(event, callback));
}

export function addEventToInput(dataValue, event, callback, props = {}) {
  addEventToElement("input", dataValue, event, callback, props);
}
export function addEventToButton(dataValue, event, callback, props = {}) {
  addEventToElement("button", dataValue, event, callback, props);
}

export function debounce(fn, milliseconds = 200) {
  let timeout = null;
  return (e) => {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => fn(e), milliseconds);
  }
}