import * as React from 'react';
import Helmet from 'react-helmet';
import storageContext from '../../hooks/StoreContext';
import { Switch, Route, RouteComponentProps } from 'react-router-dom';
import { headerMenuConfig } from '../../config/menuConfig';
import './index.scss';
interface layoutProps extends RouteComponentProps {
	routes: any[];
}
const layout: React.FC<layoutProps> = ({ routes, location, history }) => {
	const handleToHref = (path: string) => {
		history.push(path);
	};
	const value = React.useContext(storageContext);
	const handleLogOut = React.useCallback(() => {
		localStorage.clear();
		sessionStorage.clear();
		window.location.replace('/login');
	}, []);
	return (
		<div className='layout'>
			<Helmet>
				<title>智慧工地</title>
			</Helmet>

			<header>
				<div className='layout-header'>
					<div className='project-name'>
						<svg>
							<defs>
								<linearGradient id='grad' x1='50%' y1='0%' x2='50%' y2='100%'>
									<stop
										offset='0%'
										style={{ stopColor: '#04cde7', stopOpacity: 1 }}
									/>
									<stop
										offset='100%'
										style={{ stopColor: '#2b39ed', stopOpacity: 1 }}
									/>
								</linearGradient>
							</defs>
							<text
								x='50%'
								y='50%'
								textAnchor='middle'
								dominantBaseline='middle'
								fill='url(#grad)'
								style={{ fontSize: 32 }}>
								{value.projectInfo.name}
							</text>
						</svg>
					</div>

					<div className='app-opertion-wrapper'>
						<span className='login-username'>{value.userInfo.username}</span>
						<span className='logOut-btn' onClick={handleLogOut}>
							退出
						</span>
					</div>
				</div>
				<nav>
					<ul>
						{headerMenuConfig.map((menu) => {
							if (menu.isAdmin && !value.userInfo.isAdmin) {
								return null;
							}
							return (
								<li
									onClick={() => handleToHref(menu.path)}
									data-checked={location.pathname === menu.path}
									key={menu.path}>
									{menu.title}
								</li>
							);
						})}
					</ul>
				</nav>
			</header>
			<section className='layout-content'>
				<Switch>
					{routes.map((route) => {
						return (
							<Route
								key={route.path}
								path={route.path}
								exact={route.exact}
								render={(props) => (
									<route.component {...props} routes={route.routes} />
								)}
							/>
						);
					})}
				</Switch>
			</section>
		</div>
	);
};
export default layout;
