import styles from "./SearchBar.module.css"
import {Link} from "react-router";
import {useEffect, useState} from "react";
import searchEvents from "../../utils/searchEvents.js";

function SearchBar() {
    const [searchQuery, setSearchQuery] = useState('');
    const [searchResults, setSearchResults] = useState([]);

    useEffect(() => {
        const performSearch = async (query) => {
            if (query.trim() === '') {
                setSearchResults([]);
                return;
            }

            const data = await searchEvents(query);
            if (data) {
                setSearchResults(data);
            } else {
                setSearchResults([]);
            }
        };


        const handler = setTimeout(() => {
            performSearch(searchQuery);
        }, 300);

        return () => {
            clearTimeout(handler);
        };
    }, [searchQuery]);

    return (
        <div className={`${styles.searchBarContainer} glassCard`}>
            <form className={styles.searchBarForm} onSubmit={(event) => event.preventDefault()}>
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 -960 960 960" fill="#currentColor">
                    <path
                        d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
                </svg>
                <input
                    type="text"
                    placeholder="Rechercher un événement"
                    value={searchQuery}
                    onChange={(event) => setSearchQuery(event.target.value)}
                />
            </form>

            <div className={styles.lineContainer}>
                {searchResults.length > 0 ? (
                    <div className={styles.line}></div>
                ) : null}
            </div>


            {searchResults.map((result, i) => (
                <Link to={`/event/` + event.id}>
                    <div className={styles.searchedEvent} key={i}>
                        <div className={`${styles.eventImageDiv}`}>
                            {result.image == null ? (
                                <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
                            ) : (
                                <img src={result.image + `.png`} alt="Photo de l'événement" />
                            )}
                        </div>
                        <p>{result.name}</p>
                    </div>
                </Link>
            ))}
        </div>
    );
}

export default SearchBar;