3RESIT/frontend/src/components/Navbar.jsx

import { useAuth } from '../contexts/AuthContext';
import React, { useState } from 'react';
import {useNavigate} from "react-router-dom";
import AlertList from "./AlertList.jsx";

export default function Navbar({ isSearchPage = false, alerts = [], onCloseAlert = () => {} }) {
    const { user, logout, isAuthenticated } = useAuth();
    const [searchQuery, setSearchQuery] = useState('');
    const [internalAlerts, setInternalAlerts] = useState([]);
    const navigate = useNavigate();

    const handleLogout = () => {
        logout();
    };

    const handleKeypress = (event) => {
        if (event.key === 'Enter') {
            const searchQuery = event.target.value;
            if (searchQuery) {
                navigate(`/search?q=${encodeURIComponent(searchQuery)}&type=videos`);
            }
        }
    }

    const onCloseInternalAlert = (alertToRemove) => {
        setInternalAlerts(internalAlerts.filter(alert => alert !== alertToRemove));
    }

    // Combine internal alerts with external alerts
    const allAlerts = [...internalAlerts, ...alerts];

    const handleCloseAlert = (alertToRemove) => {
        // Check if it's an internal alert or external alert
        if (internalAlerts.includes(alertToRemove)) {
            onCloseInternalAlert(alertToRemove);
        } else {
            onCloseAlert(alertToRemove);
        }
    };

    return (
        <nav className="flex justify-between items-center p-4 text-white absolute top-0 left-0 w-screen relative">
            <div>
                <h1 className="font-montserrat text-5xl font-black">
                    <a href="/">FreeTube</a>
                </h1>
            </div>
            <div>
                <ul className="flex items-center space-x-[44px] font-montserrat text-2xl font-black">
                    {isAuthenticated ? (
                        <>
                            <li><a href="/">Abonnements</a></li>
                            <li>
                                <a href="/profile" className="flex items-center space-x-4">
                                    <span className="text-2xl">{user?.username}</span>
                                    {user?.picture && (
                                        <img
                                            src={`${user.picture}`}
                                            alt="Profile"
                                            className="w-8 h-8 rounded-full object-cover"
                                        />
                                    )}
                                </a>
                            </li>
                            <li>
                                <button
                                    onClick={handleLogout}
                                    className="bg-red-600 p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer hover:bg-red-700"
                                >
                                    Déconnexion
                                </button>
                            </li>
                        </>
                    ) : (
                        <>
                            <li><a href="/login">Se connecter</a></li>
                            <li className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer">
                                <a href="/register">
                                    <p>Créer un compte</p>
                                </a>
                            </li>
                        </>
                    )}
                    { !isSearchPage && (
                        <li className="bg-glass backdrop-blur-glass border-glass-full border rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer w-[600/1920] h-[50px] px-3 flex items-center justify-center">
                            <input
                                type="text"
                                name="search"
                                id="searchbar"
                                placeholder="Rechercher"
                                className="font-inter text-2xl font-normal focus:outline-none bg-transparent"
                                onKeyPress={(e) => handleKeypress(e)}
                                onChange={(e) => setSearchQuery(e.target.value)}
                            />
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                                <circle cx="18.381" cy="13.619" r="12.119" stroke="white" strokeWidth="3"/>
                                <line x1="9.63207" y1="22.2035" x2="1.06064" y2="30.7749" stroke="white" strokeWidth="3"/>
                            </svg>
                        </li>
                    )}

                </ul>
            </div>
            <AlertList alerts={allAlerts} onCloseAlert={handleCloseAlert} />
        </nav>
    )

}