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 sideNavs = [
	{
		icon: <Grid1x2 color="#777" size={14}/>,
		name: 'Dashboard',
		link: '#',
		roleFunc: undefined
	},
	{
		icon: <Display color="#777" size={14}/>,
		name: 'Info Screen',
		link: '#',
		roleFunc: undefined
	},
	{
		icon: <Person color="#777" size={14}/>,
		name: 'General',
		collapsed: false,
		subNavs: [
			{
				name: 'Customer Information',
				//collapsed: true,
				link: '/customers/list',
				category: '/customers'
				// subNavs: [
				// 	{
				// 		name: 'Customer List',
				// 		link: '/customers/list'
				// 	},
				// 	{
				// 		name: 'Create New Customer',
				// 		link: '/customers'
				// 	}
				// ]
			},
			{
				name: 'Calendar',
				link: '#'
			},
			{
				name: 'Messaging',
				//collapsed: true,
				link: '/messages/list',
				category: '/messages'
				// 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,
		subNavs: [
			{
				name: 'Vehicle Information',
				link: '/vehicles/list',
				category: '/vehicles'
				// subNavs: [
				// 	{
				// 		name: 'Vehicles List',
				// 		link: '/vehicles/list'
				// 	},
				// 	{
				// 		name: 'Create New Vehicle',
				// 		link: '/vehicles'
				// 	}
				// ]
			},
			{
				name: 'Transportation Schedule',
				link: '/trans-routes/schedule',
				category: '/trans-routes'
			},
			{
				name: 'Schedule Driver for Appointment',
				link: '#'
			}
		]
	},
	{
		name: 'Medical',
		icon: <BagPlus color="#777" size={14}/>,
		collapsed: false,
		subNavs: [
			{
				name: 'Provider Information',
				link: '/medical/resources/list',
				category: '/resources'
			},
			{
				name: 'Appointment Requests',
				link: '/medical/event-request/list',
				category: '/event-request'
			},
			{
				name: 'Appointment Calendar',
				link: '/medical/events/calendar',
				category: '/events'
			}
		]
	},
	{
		name: 'Lobby',
		icon: <Tools color="#777" size={14}/>,
		collapsed: false,
		subNavs: [
			{
				name: 'Meal Status',
				link: '#'
			},
			{
				name: 'Seating Chart',
				link: '#'
			}
		]
	}
]


const SideMenu = () => {
  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) => {
		console.log('this is lik', link);
		navigate(link);
	}

  return (
		<>
			<div className={`app-side-bar-container${collapse ? ' collapsed' : ''}`}>
		 		<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.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?.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;