import React, { useState, useEffect } from "react"; import { UserRole } from "../types"; import { useAuth } from "../contexts/AuthContext"; import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation, } from "react-router-dom"; import { Menu, X, LogOut, User, Settings, Camera, Mail, Phone, GraduationCap, } from "lucide-react"; import { Button } from "./Button"; import { RegionSwitcher } from "./RegionSwitcher"; interface NavbarProps { onNavigate: (page: string) => void; currentPage: string; } export const Navbar: React.FC = ({ onNavigate, currentPage }) => { const navigate = useNavigate(); const { user, logout } = useAuth(); const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false); const [isEditProfileModalOpen, setIsEditProfileModalOpen] = useState(false); const [profileData, setProfileData] = useState({ name: user?.name || "", email: user?.email || "", phone: "", avatar: user?.avatar || "", }); const [avatarFile, setAvatarFile] = useState(null); const [avatarPreview, setAvatarPreview] = useState(null); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 20); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (isAccountDropdownOpen) { const target = event.target as HTMLElement; if (!target.closest(".relative")) { setIsAccountDropdownOpen(false); } } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, [isAccountDropdownOpen]); const getLinks = () => { if (!user) return []; switch (user.role) { case UserRole.SUPERADMIN: case UserRole.BUSINESS_OWNER: return [ { name: "Agenda", path: "painel" }, { name: "Equipe", path: "equipe" }, { name: "Cadastro de FOT", path: "cursos" }, { name: "Aprovação de Cadastros", path: "aprovacao-cadastros" }, { name: "Códigos de Acesso", path: "codigos-acesso" }, { name: "Financeiro", path: "financeiro" }, ]; case UserRole.AGENDA_VIEWER: return [ { name: "Agenda", path: "painel" }, ]; case UserRole.RESEARCHER: return [ { name: "Painel", path: "painel" }, ]; case UserRole.EVENT_OWNER: return [ { name: "Meus Eventos", path: "painel" }, { name: "Solicitar Evento", path: "solicitar-evento" }, ]; case UserRole.PHOTOGRAPHER: return [ { name: "Eventos Designados", path: "painel" }, { name: "Meus Pagamentos", path: "meus-pagamentos" }, ]; default: return []; } }; const getRoleLabel = () => { if (!user) return ""; if (user.role === UserRole.BUSINESS_OWNER) return "Empresa"; if (user.role === UserRole.EVENT_OWNER) return "Cliente"; if (user.role === UserRole.PHOTOGRAPHER) { if (user.functions && user.functions.length > 0) { return user.functions[0].nome; } return "Profissional"; } if (user.role === UserRole.SUPERADMIN) return "Super Admin"; if (user.role === UserRole.AGENDA_VIEWER) return "Visualizador"; if (user.role === UserRole.RESEARCHER) return "Pesquisa"; return ""; }; const getAvatarSrc = (targetUser: { name: string; avatar?: string }) => { if (targetUser?.avatar && targetUser.avatar.trim() !== "") { return targetUser.avatar; } return `https://ui-avatars.com/api/?name=${encodeURIComponent( targetUser.name || "User" )}&background=random&color=fff&size=128`; }; const handleAvatarChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { // Validate file size (max 5MB) if (file.size > 5 * 1024 * 1024) { alert("A imagem deve ter no máximo 5MB"); return; } // Validate file type if (!file.type.startsWith('image/')) { alert("Por favor, selecione uma imagem válida"); return; } setAvatarFile(file); // Create preview URL const reader = new FileReader(); reader.onloadend = () => { setAvatarPreview(reader.result as string); }; reader.readAsDataURL(file); } }; return ( <> ); };