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

function SearchBar(): any {
    const [searchQuery, setSearchQuery] = useState<string>("");
    const [searchResults, setSearchResults] = useState<any[]>([]);
    const location: any = useLocation();

    useEffect(() => {
        const performSearch = async (query: string): Promise<void> => {
            if (query.trim() === "") {
                setSearchResults([]);
                return;
            }

            let data: any;

            if (location.pathname.includes("events")) {
                data = await searchEvents(query);
            } else if (location.pathname.includes("volunteers")) {
                data = await searchUsers(query);
            }

            if (data) {
                setSearchResults(data);
            } else {
                setSearchResults([]);
            }
        };

        const handler: ReturnType<typeof setTimeout> = setTimeout(() => {
            performSearch(searchQuery);
        }, 300);

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

    return (
        <div className={`${styles.searchBarContainer} glassCard`}>
            <form
                className={styles.searchBarForm}
                onSubmit={(element: React.FormEvent<HTMLFormElement>) =>
                    element.preventDefault()
                }
            >
                <img src="search.svg" alt="Rechercher" />
                <input
                    type="text"
                    placeholder="Rechercher un événement"
                    value={searchQuery}
                    onChange={(element: React.ChangeEvent<HTMLInputElement>) =>
                        setSearchQuery(element.target.value)
                    }
                />
            </form>

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

            <div className={styles.elementList}>
                {searchResults.map((result: any, i: number) =>
                    location.pathname.includes("events") ? (
                        <Link to={`/events/` + result.id} key={i}>
                            <div className={styles.searchedEvent}>
                                <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>
                    ) : location.pathname.includes("volunteers") ? (
                        <Link to={`/profile/` + result.id} key={i}>
                            <div className={styles.searchedEvent}>
                                <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} {result.lastname}
                                </p>
                            </div>
                        </Link>
                    ) : null
                )}
            </div>
        </div>
    );
}

export default SearchBar;