import React from 'react';
import {Sidebar, Menu, Segment, Icon, Container} from 'semantic-ui-react';
import {Link} from 'react-router';
import MItem from './Item';

const MainMenu = ({i18n, show, toggleMenu, children, permissions, showDashboard, toggleDashboard}) => (
	<div style={{height: '100%'}}>
		<Sidebar.Pushable as={Segment} style={{zIndex: 100}}>
			<Sidebar as={Menu}  animation="push" width="thin" visible={show} icon="labeled" vertical inverted>
				<MItem toLink="/admin" txt={i18n && 't' in i18n ? i18n.t('menu.item.systeminfo') : ''} permission={true} onClick={() => toggleMenu()} />
				<MItem toLink="/admin/user" txt={i18n && 't' in i18n ? i18n.t('menu.item.userlist') : ''} permission={true} onClick={() => toggleMenu()} />
				<MItem toLink="/admin/dio" txt={i18n && 't' in i18n ? i18n.t('menu.item.dio') : ''} permission={permissions.dio} onClick={() => toggleMenu()} />
				<MItem toLink="/admin/log" txt={i18n && 't' in i18n ? i18n.t('menu.item.log') : ''} permission={permissions.log} onClick={()=>toggleMenu()} />
				<MItem toLink="/admin/leone" txt={i18n && 't'in i18n ? i18n.t('menu.item.leone') : ''} permission={permissions.leone} onClick={()=>toggleMenu()} />
				<MItem toLink="/admin/iogroup" txt={i18n && 't' in i18n ? i18n.t('menu.item.iogroup') : ''} permission={permissions.iogroup} onClick={()=>toggleMenu()} />
				<MItem toLink="/admin/iocmd" txt={i18n && 't' in i18n ? i18n.t('menu.item.iocmd') : ''} permission={permissions.iocmd} onClick={()=>toggleMenu()} />
				<MItem toLink="/admin/schedule" txt={i18n && 't' in i18n ? i18n.t('menu.item.schedule') : ''} permission={permissions.schedule} onClick={()=>toggleMenu()} />
				<MItem toLink="/admin/modbus" txt={i18n && 't' in i18n ? i18n.t('menu.item.modbus') : ''} permission={permissions.modbus} onClick={()=>toggleMenu()} />
				<MItem toLink="/admin/modbuscmd" txt={i18n && 't' in i18n ? i18n.t('menu.item.modbuscmd') : ''} permission={permissions.modbus} onClick={()=>toggleMenu()} />
				<MItem toLink="/admin/link" txt={i18n && 't' in i18n ? i18n.t('menu.item.link') : ''} permission={permissions.link} onClick={()=>toggleMenu()} />
				<MItem toLink="/admin" txt={i18n && 't' in i18n ? i18n.t('menu.item.logout') : ''} permission={true} onClick={()=>{
					sessionStorage.clear();
					location.replace('/');
				}} />
			</Sidebar>
			<Sidebar.Pusher style={{backgroundColor: '#eee'}}>
				<Menu fixed="top" >
					<Menu.Item onClick={() => toggleMenu(show ? false : true)} >
						<Icon name="sidebar" />
						{i18n && 't' in i18n ? i18n.t('menu.title') : ''}
					</Menu.Item>
					<Menu.Menu position="right">
						<Menu.Item onClick={()=>{
								let ss = !showDashboard;
								toggleDashboard(ss)
								localStorage.setItem('show_dashboard', ss ? '1' : '0');
							}}>
							{i18n&&i18n.t ? (
								showDashboard ? '關閉Dashboard' : '開啟Dashboard'
							) : ''}
						</Menu.Item>
					</Menu.Menu>
				</Menu>
				<Container style={{paddingTop: '45px', paddingBottom: '40px'}}>
				{children}
				</Container>
			</Sidebar.Pusher>
		</Sidebar.Pushable>	
	</div>
);

export default MainMenu;