import { useState } from 'react'
import { Link } from 'react-router-dom'
import UserShortComponent from '../components/common/UserShortComponent';

export default function Navbar() {
	const [activeDropdown, setActiveDropdown] = useState<string | null>();
	const toggleDropdown = (id: string) => setActiveDropdown(activeDropdown != id ? id : null);

	return (
		<>
			<nav className="navbar navbar-expand-lg bg-dark p-2">
				{/* <div className='row w-100 justify-content-between'>
					<div className='col-auto'>
						<div className='container-fluid'>
							<img className="navbar-brand" src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Polygon_Blockchain_Matic_Logo.svg/512px-Polygon_Blockchain_Matic_Logo.svg.png' width={30}/>
						</div>
					</div>
					<div className='col-auto'>
						<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span className="navbar-toggler-icon"></span>
						</button>
					</div>
				</div> */}
				<img className="navbar-brand ms-2" src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Polygon_Blockchain_Matic_Logo.svg/512px-Polygon_Blockchain_Matic_Logo.svg.png' width={30}/>
				<div className="collapse navbar-collapse" id="navbarSupportedContent">
					<ul className="navbar-nav me-auto">
						<li className="nav-item">
							<Link to='/' className='nav-link active'>Главная</Link>
						</li>
						{/* <li className="nav-item">
							<a className="nav-link" href="#">Link</a>
						</li> */}
						<li className="nav-item dropdown">
							{/* <button className="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false"> */}
							<button className="nav-link dropdown-toggle" type="button" onClick={() => toggleDropdown('administration')}>
								Администрирование
							</button>
							<ul className={'dropdown-menu' + (activeDropdown == 'administration' ? ' show' : '')}>
								<li>
									<Link to='/admin/library/dictionaries' className='dropdown-item' onClick={() => setActiveDropdown(null)}>Редактировать словари</Link>
								</li>
								{/* <li>
									<a className="dropdown-item" href="#">Another action</a>
								</li>
								<li><hr className="dropdown-divider" /></li>
								<li>
									<a className="dropdown-item" href="#">Something else here</a>
								</li> */}
							</ul>
						</li>
						{/* <li className="nav-item">
							<a className="nav-link disabled" aria-disabled="true">Disabled</a>
						</li> */}
					</ul>
				</div>
				<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span className="navbar-toggler-icon"></span>
				</button>
				<div className='text-primary'>
					<UserShortComponent />
				</div>
			</nav>
			
    	</>
  	)
}
