import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import MenuIcon from '@mui/icons-material/Menu';
import CloseIcon from '@mui/icons-material/Close';
import $ from 'jquery';
import 'magnific-popup';
import 'magnific-popup/dist/magnific-popup.css';
import './Navbar.css';

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const navigate = useNavigate();

  const handleLinkClick = (path) => {
    $.magnificPopup.close();
    setIsMenuOpen(false);
    navigate(path);
  };

  const toggleMenu = () => {
    if (!isMenuOpen) {
      $.magnificPopup.open({
        items: {
          src: '#navbar-popup',
          type: 'inline'
        },
        midClick: true,
        closeOnBgClick: true,
        callbacks: {
          open: () => setIsMenuOpen(true),
          close: () => setIsMenuOpen(false),
        },
      });
    } else {
      $.magnificPopup.close();
    }
  };

  return (
    <nav className="navbar">
      <div className="navbar-container">
        <div className="menu-icon" onClick={toggleMenu}>
          {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
        </div>
        <ul className="navbar-list">
          <li className="navbar-item"><Link to="/dashboard">Dashboard</Link></li>
          <li className="navbar-item"><Link to="/manage-ads">Manage Ads</Link></li>
          <li className="navbar-item"><Link to="/roles">Roles</Link></li>
          <li className="navbar-item"><Link to="/logout">Logout</Link></li>
        </ul>
        <div id="navbar-popup" className="mfp-hide">
          <ul className="navbar-list-popup">
            <li className="navbar-item"><Link to="/dashboard" onClick={() => handleLinkClick('/dashboard')}>Dashboard</Link></li>
            <li className="navbar-item"><Link to="/manage-ads" onClick={() => handleLinkClick('/manage-ads')}>Manage Ads</Link></li>
            <li className="navbar-item"><Link to="/roles" onClick={() => handleLinkClick('/roles')}>Roles</Link></li>
            <li className="navbar-item"><Link to="/logout" onClick={() => handleLinkClick('/logout')}>Logout</Link></li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;