import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Alert, SideMenuLayout } from 'lib/components';
import { ToastContainer, toast } from 'react-toastify';

import UserInfo from 'components/UserInfo';
import icons from '../../constants/icons.js';

import { injectIntl } from 'react-intl';
import messages from './messages.js';


export default injectIntl((props) => {
	let localStorage = global.localStorage;
	let open = true;
	if (localStorage) {
		open = localStorage.getItem("sideMenuOpen") == "true";
	}

	let intl = props.intl;

	let menuItems = [
		{ 
			id: 'stats', 
			route: '/stats', 
			title: intl.formatMessage(messages.homeMenu),
			icon: icons.reports
		}, { 
			id: 'logout', 
			route: '/logout', //just to make the menu nice
			action: () => { window.location = '/logout' },
			title: intl.formatMessage(messages.logoutMenu),
			icon: icons.logout
		},
	];

	return (
		<SideMenuLayout menuItems={ menuItems } menuTopSection={ <UserInfo/> } menuOpen={ open } onMenuStateChanged={ (open) => { if (localStorage) { localStorage.setItem("sideMenuOpen", "" + open); } } }>
			{ props.children }
			<div style={{position: "absolute", height: 0}}>
				<ToastContainer autoClose={ 4000 } position={ toast.POSITION.TOP_RIGHT } />
			</div>
			<Alert.Component />
		</SideMenuLayout>
	);
});
