import { Bell, ChevronDown, PersonCircle } from 'react-bootstrap-icons';
import { Outlet, useLocation, Navigate } from 'react-router-dom';
import { AuthService } from '../../services';
import { getHrTitleDisplayName } from '../../shared';
import SideMenu from './menu';
import {  Dropdown } from "react-bootstrap";

function Layout() {
  const location = useLocation();
  const showMenu = location.pathname !== '/login' && location.pathname !== '/landing'; // Example: Hide menu on login page
  const userRaw = localStorage.getItem('user');
  const user = userRaw ? JSON.parse(userRaw) : null;
  const displayTitle = getHrTitleDisplayName((user?.title || user?.roles?.[0] || '').toString());
	const getLogoSuffix = () => {
    return (window.location.hostname.includes('worldshine2.mayo.llc') || window.location.hostname.includes('site2') || window.location.host.includes('ws2') ||window.location.hostname.includes('localhost')) ? "Care LLC" : ((window.location.hostname.includes('worldshine3.mayo.llc') ||window.location.hostname.includes('site3') || window.location.hostname.includes('ws3')) ? "Cloverleaf LLC" : "International LLC");
  }

  return (
    <div className="app-layout">
			{
				showMenu && <SideMenu />
			}
      <div className="app-main-container">
        <div className="app-menu-user-profile-container noprint">
          <Bell size={16} color="#0066B1"/>
          <div className="app-menu-user-profile ms-2">
            <PersonCircle size={24}/>
            <div className="user-info-container me-2">
              <div className="user-name">{user?.username}</div>
              <div className="user-role">{displayTitle}</div>
            </div>
            <Dropdown>
              <Dropdown.Toggle variant="transparent" id="user-basic">
                {/* <ChevronDown size={12} color="#555"></ChevronDown> */}
              </Dropdown.Toggle>

              <Dropdown.Menu>
                <Dropdown.Item className="small-dropdown-item" onClick={() => AuthService.logout(null, true)}>Logout</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
           
          </div>
        </div>
        
				{localStorage.getItem('user') && localStorage.getItem('token') ? <Outlet /> : <Navigate to="/login" replace />}
			</div>
    </div>
  );
}

export default Layout;