import { useEffect, useRef } from 'preact/hooks'

export default function SearchBox() {
	const dialog = useRef<HTMLDialogElement>(null)

	useEffect(() => {
		dialog.current?.addEventListener('click', (event) => {
			if (event.target === dialog.current) {
				dialog.current?.close()
			}
		})
	}, [])

	return (
		<>
			<button
				class='islands__search_box__button'
				onClick={() => dialog.current?.showModal()}
			>
				<i class='ri-search-line'></i>
				<span>&nbsp;Rechercher</span>
			</button>
			<dialog ref={dialog} class='islands__search_box__dialog'>
				<input type='search' name='' id='' placeholder='Rechercher' autoFocus />
				<div class='islands__search_box__dialog__content'>
					<h3>Machines</h3>
					<ul>
						<li>machine 1</li>
						<li>machine 2</li>
						<li>machine 3</li>
					</ul>
					<h3>Projets</h3>
					<ul>
						<li>projet 1</li>
						<li>projet 2</li>
						<li>projet 3</li>
					</ul>
					<h3>Blog</h3>
					<ul>
						<li>news 1</li>
						<li>news 2</li>
						<li>news 3</li>
					</ul>
					<h3>Usager</h3>
					<ul>
						<li>Alice</li>
						<li>Bob</li>
						<li>Chloé</li>
					</ul>
				</div>
			</dialog>
		</>
	)
}