import { Outlet, useLocation, Navigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { ArrowBarLeft, ArrowBarRight, Grid1x2, Display, Person, BusFront, BagPlus, Tools, ChevronDown, ChevronUp} from 'react-bootstrap-icons'
import { AuthService } from '../../services';
import { useNavigate } from 'react-router-dom';




const SideMenu = () => {
	const SIDEBAR_COLLAPSE_STORAGE_KEY = 'globalSidebarIsCollapsed';
	const sideNavs = [
		{
			icon: <Grid1x2 color="#777" size={14}/>,
			name: 'Dashboard',
			collapsed: false,
			roleFunc: () => true,
			subNavs: [
				{
					name: 'Dashboard',
					link: '/dashboard/dashboard',
					category: '/dashboard/dashboard',
					roleFunc: AuthService.canViewRoutes
				},
				{
					name: 'Admin View',
					link: '/dashboard/admin-view',
					category: '/dashboard/admin-view',
					roleFunc: AuthService.canAccessLegacySystem
				}
			]
		},
		{
			icon: <Display color="#777" size={14}/>,
			name: 'Info Screen',
			link: '/info-screen',
			roleFunc: () => true
		},
		{
			icon: <Person color="#777" size={14}/>,
			name: 'General',
			collapsed: false,
			roleFunc: () => true,
			subNavs: [
				{
					name: 'Customer Information',
					//collapsed: true,
					link: '/customers/list',
					category: '/customers',
					roleFunc: AuthService.canViewCustomers
					// subNavs: [
					// 	{
					// 		name: 'Customer List',
					// 		link: '/customers/list'
					// 	},
					// 	{
					// 		name: 'Create New Customer',
					// 		link: '/customers'
					// 	}
					// ]
				},
				{
					name: 'Calendar',
					link: '/center-calendar',
					category: '/center-calendar',
					roleFunc: () => true
				},
				{
					name: 'Messaging',
					//collapsed: true,
					link: '/messages/list',
					category: '/messages',
					roleFunc: () => true
					// subNavs: [
					// 	{
					// 		name: 'Messages List',
					// 		link: '/messages/list'
					// 	},
					// 	{
					// 		name: 'Create New Message',
					// 		link: '/messages'
					// 	},
					// 	{
					// 		name: 'Send Message',
					// 		link: '/messages/send-message'
					// 	},
					// 	{
					// 		name: 'Sent Messages List',
					// 		link: '/messages/sent-messages/list'
					// 	}
					// ]
				},
			// 	{
			// 		name: 'Center Phones',
			// 		//collapsed: true,
			// 		link: '/center-phones/list'
			// 		// subNavs: [
			// 		// 	{
			// 		// 		name: 'Center Phones List',
			// 		// 		link: '/center-phones/list'
			// 		// 	},
			// 		// 	{
			// 		// 		name: 'Create New Center Phone',
			// 		// 		link: '/center-phones'
			// 		// 	}
			// 		// ]
			// 	}
			]
		},
		{
			name: 'Transportation',
			icon: <BusFront color="#777" size={14}/>,
			collapsed: false,
			roleFunc: AuthService.canAddOrEditVechiles,
			subNavs: [
				{
					name: 'Vehicle Information',
					link: '/vehicles/list',
					category: '/vehicles',
					roleFunc: AuthService.canAddOrEditVechiles
					// subNavs: [
					// 	{
					// 		name: 'Vehicles List',
					// 		link: '/vehicles/list'
					// 	},
					// 	{
					// 		name: 'Create New Vehicle',
					// 		link: '/vehicles'
					// 	}
					// ]
				},
				{
					name: 'Transportation Schedule',
					link: '/trans-routes/dashboard',
					category: '/trans-routes/dashboard',
					roleFunc: AuthService.canViewRoutes
				},
				{
					name: 'Templates',
					link: '/trans-routes/daily-templates/list',
					category: '/trans-routes/daily-templates',
					roleFunc: AuthService.canViewRoutes
				},
				{
					name: 'Appointment One-Day List',
					link: '/medical/events/list',
					category: '/events/list',
					roleFunc: AuthService.canAccessLegacySystem
				},
				// {
				// 	name: 'Customer Report',
				// 	link: '/admin/customer-report',
				// 	category: '/admin/',
				// 	roleFunc: AuthService.canViewAttendance
				// }
				// {
				// 	name: 'Schedule Driver for Appointment',
				// 	link: '#',
				// 	roleFunc: AuthService.canViewRoutes
				// }
			]
		},
		{
			name: 'Medical',
			icon: <BagPlus color="#777" size={14}/>,
			collapsed: false,
			roleFunc: AuthService.canAccessLegacySystem,
			subNavs: [
				{
					name: 'Provider Information',
					link: '/medical/resources/list',
					category: '/resources',
					roleFunc: AuthService.canAccessLegacySystem
				},
				{
					name: 'Appointment Requests',
					link: '/medical/event-request/list',
					category: '/event-request',
					roleFunc: AuthService.canAccessLegacySystem
				},
				{
					name: 'Appointment Calendar',
					link: '/medical/events/calendar',
					category: '/events/calendar',
					roleFunc: AuthService.canAccessLegacySystem
				},
				{
					name: 'Appointment Multi-Days List',
					link: '/medical/events/multiple-list',
					category: '/events/multiple-list',
					roleFunc: AuthService.canAccessLegacySystem
				},
				{
					name: 'Template',
					link: '/medical/template',
					category: '/medical/template',
					roleFunc: AuthService.canAccessLegacySystem
				}
			]
		},
		{
			name: 'Lobby',
			icon: <Tools color="#777" size={14}/>,
			collapsed: false,
			roleFunc: () => true,
			subNavs: [
				{
					name: 'Meal Status',
					link: '/meal-status',
					roleFunc: () => true
				},
				{
					name: 'Seating Chart',
					link: '/seating',
					roleFunc: () => true
				}
			]
		},
		{
			name: 'Admin',
			icon: <Tools color="#777" size={14}/>,
			collapsed: false,
			roleFunc: () => AuthService.canViewEmployees() || AuthService.canAddOrEditEmployees(),
			subNavs: [
				{
					name: 'Employees',
					link: '/employees/list',
					category: '/employees',
					roleFunc: () => AuthService.canViewEmployees() || AuthService.canAddOrEditEmployees()
				},
				{
					name: 'Permission',
					link: '/admin/permission',
					category: '/admin/permission',
					roleFunc: () => AuthService.canViewEmployees() || AuthService.canAddOrEditEmployees()
				}
			]
		}
	];
  const [collapse, setCollapse] = useState(false);
	const [navs, setNavs] = useState(sideNavs)
  const location = useLocation();
	const navigate = useNavigate();
  const showMenu = location.pathname !== '/login' && location.pathname !== '/landing'; // Example: Hide menu on login page
	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");
  }

	const toggleMenu = (item) => {
		item.collapsed = !item.collapsed
		const navsCopy = [...sideNavs];
		
		setNavs(navsCopy.map((nav) => item.name === nav.name ? item : nav));
	}

	const goToLink = (link) => {
		navigate(link);
	}

	useEffect(() => {
		const savedValue = sessionStorage.getItem(SIDEBAR_COLLAPSE_STORAGE_KEY);
		if (savedValue === 'true' || savedValue === 'false') {
			setCollapse(savedValue === 'true');
		}
	}, []);

	useEffect(() => {
		sessionStorage.setItem(SIDEBAR_COLLAPSE_STORAGE_KEY, String(collapse));
	}, [collapse]);

  return (
		<>
			<div className={`app-side-bar-container${collapse ? ' collapsed' : ''} noprint`}>
		 		<div className={`app-side-bar-logo${collapse ? ' collapsed' : ''}`}>
					<img src="/images/logo-trans.png" />
					{!collapse && <strong className="logo-worldshine">Worldshine</strong>}
					{!collapse && <span className="logo-suffix">{getLogoSuffix()}</span>}
				</div>
				<div className="app-side-bar-menu-container">
					{
						sideNavs.filter(item => item.roleFunc()).map((sideNav) => {
							return <div className={`app-side-bar-list-item-container${collapse ? ' collapsed' : ''}`}>
								<div onClick={() => sideNav.link && goToLink(sideNav.link)} className={`app-side-bar-list-item main-nav-item${sideNav.category && location?.pathname?.includes(sideNav.category) ? ' app-side-bar-list-item-active' : '' }`}>
									{ sideNav?.icon ? <>{sideNav.icon}</> : <></>}
									{ !collapse && <span className={`app-side-bar-list-item-name${sideNav?.icon? ' with-icon' : ''}`}>{sideNav.name}</span> }
									{ !collapse && sideNav?.subNavs?.length > 0 && <span onClick={() => toggleMenu(sideNav)} className="float-icon">{sideNav?.collapsed ? <ChevronDown color="#777" size={12}/> : <ChevronUp  color="#777" size={12}/>}</span> }
								</div>
								{
									!collapse && !sideNav?.collapsed && sideNav?.subNavs?.filter(item=> item.roleFunc()).map((subNav) => <div onClick={() => subNav.link && goToLink(subNav.link)} className={`app-side-bar-list-item sub-nav-item${subNav?.category && location?.pathname?.includes(subNav?.category) ? ' app-side-bar-list-item-active' : '' }`}>
										{ subNav?.icon ? <>{subNav.icon}</> : <></>}
										{ !collapse && <span className={`app-side-bar-list-item-name${subNav?.icon? ' with-icon' : ''}`}>{subNav.name}</span> }
										{ subNav?.subNavs?.length > 0 && <span onClick={() => toggleMenu(subNav)} className="float-icon">{sideNav?.collapsed ? <ChevronDown color="#777" size={12}/> : <ChevronUp  color="#777" size={12}/>}</span> }
								  </div>)
								}
							</div>
						})
					}
				</div>

				<div className={`app-side-bar-collapse ${collapse ? ' collapsed' : ''}`} onClick={() => setCollapse(!collapse)}>
				  {collapse ? <ArrowBarRight color="#777" size={20} /> : <><ArrowBarLeft color="#777" size={20}/> <span className='collapse-label'>{` Collapse`}</span></>}
				</div>
		 	</div>
		</>
  );
}

export default SideMenu;