let searchBar = document.querySelector('#search-bar input');

hotkeys('/', {keyup: true}, function (event, _){
  if (event.type != 'keyup') {
    return;
  }
  console.log(searchBar);
  searchBar.focus();
});


let filtered_tags = new Set();

/**
  * @param {string} name
  */
function filter_tags(name) {
	filtered_tags.add(name);
	/**
	 * @type {NodeListOf<HTMLElement>}
	 */
	let covers = document.querySelectorAll('.cover');
	for (let cover of covers) {
	/**
	 * @type {Array<string>}
	 */
		let tags = eval(cover.dataset['tags']); // yeehaw!!! eu sou um cowboy yeehaw!!!
		if (!(tags.includes(name))) {
			cover.classList.add('hidden');
		}
	}
  const url = new URL(window.location.href);
  const new_params = new URLSearchParams([
    ['tags',  Array.from(filtered_tags).join('&')]
    // ...Array.from(url.searchParams.entries()),
  ]).toString();
  window.history.replaceState(null, "", `${url.pathname}?${new_params}`);
}

/**
  * @param {string} name
  */
function filter_artists(name) {
	filtered_tags.add(name);
	/**
	 * @type {NodeListOf<HTMLElement>}
	 */
	let covers = document.querySelectorAll('.cover');
	for (let cover of covers) {
	/**
	 * @type {Array<string>}
	 */
		let tags = eval(cover.dataset['tags']); // yeehaw!!! eu sou um cowboy yeehaw!!!
		if (!(tags.includes(name))) {
			cover.classList.add('hidden');
		}
	}
  const url = new URL(window.location.href);
  const new_params = new URLSearchParams([
    ['tags',  Array.from(filtered_tags).join('&')]
    // ...Array.from(url.searchParams.entries()),
  ]).toString();
  window.history.replaceState(null, "", `${url.pathname}?${new_params}`);
}


// filtra tags na url da página
const url = new URL(window.location.href);
filtered_tags = new Set(url.searchParams.get('tags')?.split('&'));
filtered_tags?.forEach(filter_tags);

function clear_filters() {
  window.history.replaceState(null, "", url.pathname);
	document.querySelectorAll('.cover').forEach(x => x.classList.remove('hidden'));
	filtered_tags = new Set();
}

/**
  * @param {Event & {target: HTMLElement}} event
  */
function inspectSetTimeout(event) {
  let target = event.target;
  let id = setTimeout(
    () => {
      let targetId = '#' + target.id;
      htmx.trigger(targetId, 'inspect', {});
      // let hoveringCover = document.querySelector(`${targetId} img`);
      // let inspectorImage = document.querySelector('.float img');
      // if (inspectorImage == null) {
      //   return;
      // }
      // let cloned = hoveringCover.cloneNode();
      // cloned.id = 'cloned';
      // inspectorImage.before(cloned)
    },
    500
  );

  target.dataset['timeout'] = id;
}

/**
  * @param {Event & {target: HTMLElement}} event
  */
function inspectClearTimeout(event) {
  let target = event.target;
  clearTimeout(target.dataset['timeout']);
}