import icons from 'icons';
import * as sfw from 'sfw';
const { Div, Input, Button } = sfw.element.native;

const css = await sfw.css(import.meta.url, './index.css');

export default class Search extends sfw.element.Container {
	#container
	#search

	constructor() {
		super({ css });

		this.onsubmit = () => {}
		this.onhide = () => {}

		this.onclick = (e) => e.stopPropagation();
		this.hide = () => {
			this.#container.classList.remove('visible');
			document.removeEventListener('click', this.hide);
			this.onhide();
		};

		this.body.append(
			this.#container = Div.new({
				id: 'container',
				children: [
					Div.new({ innerText: 'Search', id: 'title' }),
					Div.new({
						id: 'search-box',
						children: [
							this.#search = Input.new({
								type: 'search',
								onsearch: () => this.submit(),
								onkeydown: (event) => {
									if (event.key === 'Enter') {
										this.submit();
									}
								}
							}),
							Button.new({
								children: [ icons.search ],
								onclick: () => this.submit(),
							}),
						]
					})
				]
			})
		);
	}

	submit() {
		this.onsubmit(this.#search.value);
		this.#search.blur();
		this.hide();
	}

	toggle() {
		this.#container.classList.toggle('visible');

		if (this.#container.classList.contains('visible')) {
			this.#search.focus()
			document.addEventListener('click', this.hide)
		}
	}
}