import { Link } from 'react-router-dom';
import { useState, useRef, useEffect } from 'react';

import { UserBurger } from '../UserBurger/UserBurger';
import { SidebarNavItem } from '../SidebarNavItem/SidebarNavItem';
import styles from './Navbar.module.scss';

export const Navbar = () => {
    const links = [
    { to: '/',         icon: 'fas fa-home',      label: 'Главная', end: true },
    { to: '/specialist',  icon: 'fas fa-user-md',   label: 'Врачи' },
    { to: '/lostDoctors',  icon: 'fas fa-address-card',   label: 'Врачи-потеряшки' },
    { to: '/infoclinic',  icon: 'fas fa-table',   label: 'Расписание ИК' },
    { to: '/prices',icon: 'fas fa-receipt',  label: 'Цены и услуги' },
    { to: '/promotions',icon: 'fas fa-percent',  label: 'Акции' },
    { to: '/departments',icon: 'fas fa-stethoscope',  label: 'Отделения' },
    { to: '/filials',icon: 'fas fa-building',  label: 'Филиалы' },
    { to: '/news', icon: 'fas fa-newspaper', label: 'Новости' },
    { to: '/site-promo', icon: 'fas fa-bullhorn', label: 'Промо (контент)' },
    { to: '/disease', icon: 'fas fa-heartbeat', label: 'Заболевания' },
    { to: '/medical-center', icon: 'fas fa-hospital', label: 'Медцентры' },
    { to: '/article', icon: 'fas fa-file-alt', label: 'Статьи' },
    { to: '/site-services', icon: 'fas fa-concierge-bell', label: 'Услуги сайта' },
  ];
  const [open, setOpen] = useState(false);
  const toggleRef = useRef(null);
  const menuRef   = useRef(null);

  useEffect(() => {
    const handleOutside = e => {
      if (
        menuRef.current &&
        !menuRef.current.contains(e.target) &&
        toggleRef.current &&
        !toggleRef.current.contains(e.target)
      ) {
        setOpen(false)
      }
    }
    document.addEventListener('mousedown', handleOutside)
    return () => document.removeEventListener('mousedown', handleOutside)
  }, []);

  return (
    <nav className={`navbar navbar-expand navbar-light topbar mb-4 static-top shadow ${styles['navbar-background']}`}>
      <div className="d-lg-none mr-3">
          <button
            className="btn btn-outline-success"
            type="button"
            onClick={() => setOpen(o => !o)}
            aria-haspopup="true"
            aria-expanded={open}
            ref={toggleRef}
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          {open && (
          <div
            ref={menuRef}
            className="dropdown-menu dropdown-menu-left shadow animated--grow-in show bg-gradient-primary sidebar-dark"
            aria-labelledby="userMenu"
          >
            {links.map(({ to, icon, label, end }) => (
                    <SidebarNavItem
                      key={to}
                      to={to}
                      icon={icon}
                      label={label}
                      end={end}
                      onClick={() => setOpen(false)}
                    />
                  ))}
          </div>
        )}
        </div>
      <Link className="navbar-brand" to="/">
        <img src="/src/assets/logo.png" alt="" style={{height: '3rem'}}/>
      </Link>
      <UserBurger />
    </nav>
  )
};