import React, { useState, useEffect, useRef } from 'react'; import { Link } from "react-router-dom"; import { MdClose } from 'react-icons/md'; import HasIdValidation from "../LeumasID/HasIdValidation"; import axios from 'axios'; import "./Header.css"; import { searchConfigs } from "./searchConfigs"; import { FaUser, FaHome, FaBell, FaUsers, FaKey, FaLevelUpAlt, FaTrophy, FaCog, FaHistory, FaTasks, FaBars, FaTimes, FaClipboard } from 'react-icons/fa'; import NotificationPopup from "./Popups/NotificationPopup"; import AchievementsPopup from "./Popups/AchievementsPopup"; import FriendRequestsPopup from './Popups/FriendRequestsPopup'; import HistoryPopup from "./Popups/HistoryPopup"; import SettingsPopup from "./Popups/SettingsPopup"; import AutomationsPopup from "./Popups/AutomationsPopup"; const Header = ({ ThemeToggleButton, useTheme, useAuthUser, useSignOut, headerLinksUrl, megaMenuUrl }) => { const [siteHeaderLinks, setSiteHeaderLinks] = useState({ links: [], logo: {} }); const [isDropdownOpen, setIsDropdownOpen] = useState(null); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [mobileDropdownOpen, setMobileDropdownOpen] = useState(null); const [showProfilePopup, setShowProfilePopup] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const [searchResults, setSearchResults] = useState([]); const [showSearchResults, setShowSearchResults] = useState(false); const user = useAuthUser(); const signOut = useSignOut(); const [notifications, setNotifications] = useState(['Notification 1', 'Notification 2']); const [friendRequests, setFriendRequests] = useState(['Friend Request 1', 'Friend Request 2']); const [historyData, setHistoryData] = useState([{ site: 'Site 1', ip: '192.168.0.1' }, { site: 'Site 2', ip: '192.168.0.2' }]); const [settings, setSettings] = useState(['Setting 1', 'Setting 2']); const [achievements, setAchievements] = useState(['Achievement 1', 'Achievement 2']); const [automations, setAutomations] = useState(['Automation 1', 'Automation 2']); const [showNotificationPopup, setShowNotificationPopup] = useState(false); const [showFriendRequestsPopup, setShowFriendRequestsPopup] = useState(false); const [showHistoryPopup, setShowHistoryPopup] = useState(false); const [showSettingsPopup, setShowSettingsPopup] = useState(false); const [showAchievementsPopup, setShowAchievementsPopup] = useState(false); const [showAutomationsPopup, setShowAutomationsPopup] = useState(false); const [megaMenu, setMegaMenu] = useState({}); const { theme } = useTheme(); // Use the theme from the passed-in hook console.log("Header's Theme:", theme); const fetchMegaMenu = async () => { try { const response = await axios.get(megaMenuUrl); setMegaMenu(response.data); } catch (err) { alert("Failed to fetch Mega Menu. Server must be down.", err); } }; useEffect(() => { fetch(headerLinksUrl) .then(response => response.json()) .then(data => { setSiteHeaderLinks(data); }) .catch(error => console.error('Error fetching site header links:', error)); fetchMegaMenu(); }, [headerLinksUrl, megaMenuUrl]); const toggleProfilePopup = () => { setShowProfilePopup(!showProfilePopup); }; const handleMouseEnter = (index) => { setIsDropdownOpen(index); }; const handleDropdownMouseLeave = () => { setIsDropdownOpen(null); }; const toggleMobileDropdown = (index) => { if (mobileDropdownOpen === index) { setMobileDropdownOpen(null); } else { setMobileDropdownOpen(index); } }; const handleSignOut = () => { signOut(); window.location.href = '/'; }; const debounce = (func, delay) => { let debounceTimer; return function (...args) { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => func(...args), delay); }; }; const handleSearch = async () => { try { const searchResults = await searchConfigs(searchQuery); setSearchResults(searchResults); setShowSearchResults(true); } catch (error) { console.error("Search error:", error); } }; const debouncedFetchSearchResults = debounce(handleSearch, 300); const handleSearchChange = (e) => { const query = e.target.value; setSearchQuery(query); debouncedFetchSearchResults(query); }; const copyToClipboard = (text) => { navigator.clipboard.writeText(JSON.stringify(text, null, 2)) .then(() => alert("Copied to clipboard")) .catch((err) => console.error("Could not copy text", err)); }; const scrollContainerRef = useRef(null); const scrollLeft = () => { if (scrollContainerRef.current) { scrollContainerRef.current.scrollBy({ left: -200, behavior: 'smooth', }); } }; const scrollRight = () => { if (scrollContainerRef.current) { scrollContainerRef.current.scrollBy({ left: 200, behavior: 'smooth', }); } }; return ( ); }; export default Header;