import styles from "./ToolBar.module.css"
import {Link} from "react-router";
import Filter from "../Filter/Filter.jsx";
import {useEffect, useState} from "react";
import SearchBar from "../SearchBar/SearchBar.jsx";


function ToolBar({setFilters, filters}) {
    const [isFilterVisible, setIsFilterVisible] = useState(false);
    const [isSearchVisible, setIsSearchVisible] = useState(false);
    const toggleFilters = () => {
        setIsFilterVisible(prev => !prev);
    };


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

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



    return (
        <div>
            {isSearchVisible ? (
                <div className={styles.searchBarContainer}>
                    <div className={styles.searchBarOverlay} onClick={() => setIsSearchVisible(false)}></div>
                    <SearchBar/>
                </div>
            ) : null}
            <div className={styles.eventsButtons}>
                <Link
                    to="/event/create"
                    className={`${styles.createButton} glassCard`}>
                    +
                </Link>

                <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
                    <svg xmlns="http://www.w3.org/2000/svg" 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>
                </button>

                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
                            <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
                        </svg>
                    </button>
                    <div className={styles.filterMenu}>
                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ToolBar;