import styles from "../ToolBar.module.css"
import Button from "../../ui/button/button";
import { useEffect, useState } from "react";
import SearchBar from "../../SearchBar/SearchBar";

export default function SearchBtn() {

    const [isSearchVisible, setIsSearchVisible] = useState(false);

    useEffect(() => {
        if (isSearchVisible) {
            document.documentElement.style.overflow = 'hidden';
        } else {
            document.documentElement.style.overflow = '';
        }

        return () => {
            document.documentElement.style.overflow = '';
        };
    }, [isSearchVisible]);

    return <>

        {isSearchVisible ? (
            <div className={styles.searchBarContainer}>
                <div className={styles.searchBarOverlay} onClick={() => setIsSearchVisible(false)}></div>
                <SearchBar/>
            </div>
        ) : null}

        <div>
            <Button className={`${styles.searchButton} glassCard`} variant={"default"} onClick={() => setIsSearchVisible(true)}>
                <img src="search.svg" alt="Rechercher"/>
            </Button>
        </div>

    </>
}