import React from "react";
import { SearchBox } from "./search.module";
import { useState, useEffect } from "react";
import { actionGetUsers } from "../../actions";
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom/cjs/react-router-dom.min";

//
// const SearchBoxCommponent = () => {
//
//     const [Users, setUsers] = useState([])
//     const [searchQuery, setSearchQuery] = useState("");
//     const dispatch = useDispatch();
//     const [show, setShow] = useState(false)
//     const [loading, setLoading] = useState(false)
//
//
//     useEffect(() => {
//         setLoading(true);
//         async function getUsersData() {
//             try {
//                 const response = await actionGetUsers()(dispatch);
//                 setUsers(response.data.UserFind);
//             } catch (error) {
//                 console.log(error);
//             } finally {
//                 setLoading(false);
//             }
//         }
//         getUsersData();
//     }, [dispatch]);
//
//
//
//
//
//     const openSearchBlock = async () => {
//         setShow(true)
//     }
//
//     const closeSearch = () => {
//         setShow(false)
//     }
//
//     const handleSearchQueryChange = (e) => {
//         const query = e.target.value;
//         setSearchQuery(query);
//     };
//     const filteredUsers = searchQuery && Users?.filter((user) =>
//     user.login?.toLowerCase().includes(searchQuery.toLowerCase())
//   );
//
//     return (
//         <div>
//             {show && <div onClick={closeSearch} className="serachBG"></div>}
//             <div style={{ display: "flex", flexDirection: "column", position: "relative" }}>
//                 <SearchBox onClick={openSearchBlock}
//                     value={searchQuery}
//                     onChange={handleSearchQueryChange}
//                 />
//                 {show && <div className="SerachBoxPopup">
//                 {loading ? (
//               <h1>Loading..</h1>
//             ) : filteredUsers.length  ? (
//               filteredUsers.map((user) => (
//                 <Link  onClick={closeSearch} to={`/user/${user._id}`} style={{ display:"flex",gap:12, alignItems:"center"}} className="serach_link_user"  key={user._id}>
//                { user?.avatar?.url  ?  <img style={{ width:50, height:50, borderRadius:"50%"}} src={`../${user?.avatar?.url}`} />
//                 : <img style={{ width:50, height:50, borderRadius:"50%"}} src='https://png.pngitem.com/pimgs/s/30-307416_profile-icon-png-image-free-download-searchpng-employee.png' />
//               }
//                   <span>{user.login}</span>
//                 </Link>
//               ))
//             ) : (
//               <div>No users found</div>
//             )}
//                 </div>}
//             </div>
//         </div>
//     )
// }
//
//
// export default SearchBoxCommponent

const SearchBoxComponent = () => {
    const [users, setUsers] = useState([]);
    const [searchQuery, setSearchQuery] = useState("");
    const [show, setShow] = useState(false);
    const [loading, setLoading] = useState(false);
    const dispatch = useDispatch();

    useEffect(() => {
        setLoading(true);

        async function getUsersData() {
            try {
                const response = await actionGetUsers()(dispatch);
                setUsers(response.data.UserFind);
            } catch (error) {
                console.log(error);
            } finally {
                setLoading(false);
            }
        }

        getUsersData();
    }, [dispatch]);

    const openSearchBlock = () => {
        setShow(true);
    };

    const closeSearch = () => {
        setShow(false);
    };

    const handleSearchQueryChange = (e) => {
        const query = e.target.value;
        setSearchQuery(query);
    };

    const filteredUsers = searchQuery && users?.filter((user) =>
        user.login?.toLowerCase().includes(searchQuery.toLowerCase())
    );

    return (
        <>
            {show && <div onClick={closeSearch} className="serachBG"></div>}
            <div style={{ display: "flex", flexDirection: "column", position: "relative" }}>
                <SearchBox onClick={openSearchBlock} value={searchQuery} onChange={handleSearchQueryChange} />
                {show && (
                    <div className="SerachBoxPopup">
                        {loading ? (
                            <h1>Loading..</h1>
                        ) : filteredUsers.length ? (
                            filteredUsers.map((user) => (
                                <Link onClick={closeSearch} to={`/user/${user._id}`} style={{ display: "flex", gap: 12, alignItems: "center" }} className="serach_link_user" key={user._id}>
                                    {user?.avatar?.url ? (
                                        <img style={{ width: 50, height: 50, borderRadius: "50%" }} src={`../${user?.avatar?.url}`} />
                                    ) : (
                                        <img style={{ width: 50, height: 50, borderRadius: "50%" }} src="https://png.pngitem.com/pimgs/s/30-307416_profile-icon-png-image-free-download-searchpng-employee.png" />
                                    )}
                                    <span>{user.login}</span>
                                </Link>
                            ))
                        ) : (
                            <div>No users found</div>
                        )}
                    </div>
                )}
            </div>
        </>
    );
};

export default SearchBoxComponent;
