import React from 'react';
import Modularity from 'modularity-front';
import { Navbar , NavItem , Icon} from 'react-materialize';

import SideNav from './SideNav';

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';


let Module = Modularity.Module;
let Link = Modularity.Modules.Link;
class NavbarModule extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
		}
	}

	
	render() {
		var Img = <img src={this.logo.value} style={{height: 50}}/>
		// return  <Navbar className={this.class.value} brand={Img} 
		// 	alignLinks={this.position.value}>
		// 		{this.props.children}
				
		//     	{(this.headers.value || []).map((item,index) => 
		// 			<Link link={this.links.value[index]} key={index}>{item}</Link>
		// 		)}	
		// 	</Navbar>
			
		// 	;
		

		let navItems = [	
		...((this.headers.value || []).map((item,index) => {
			return {
				content: item,
				link: this.links.value[index]
			};
		}))];

		return <div style={{flexGrow: 1}}>
	      <AppBar position="static" className={"Navbar " + this.class.value}>
	        <Toolbar>
	        	<div className={'hide-on-large-only'}>
		          <SideNav trigger={<IconButton color="inherit" aria-label="Menu" 
		          	style={{
		    			marginLeft: -12,
		    			marginRight: 20,
					}}>
					    <MenuIcon />
					</IconButton>}
		          	SideNavItems={navItems}
		          />
	          	</div>
	          <Link link={"home"}>{Img}</Link>
	          <Typography variant="h6" color="inherit" style={{flexGrow: 1}}>
	            {this.brand.value}
	          </Typography>
	          <span style={{padding: "0 10px", display: 'none'}} className={'nav-text show-on-large'}>
	          	{(this.headers.value || []).map((item,index) => 
					<Link link={this.links.value[index]} key={index}>
						<Button key={index}>
							{item}
						</Button>
					</Link>
			  	)}
			  </span>
			  {this.props.children.map((item, index) => 
			  	<span key={index} className="nav-text">{item}</span>
			  )}
			  {super.render(false)}
	        </Toolbar>
	      </AppBar>
	    </div>	    
	}
}

NavbarModule.EditPosition = "top-right";
NavbarModule.Inputs = {
	logo: {
		type: Module.Types.Text,
		defaultValue: 'favicon.ico'
	},
	brand: {
		type: Module.Types.Text,
		defaultValue: 'Bootstrap'		
	},
	headers: {
		type: Module.Types.Array,
		defaultValue: ['Home','Test','Contact'],
		arrType: Module.Types.Text
	},
	links: {
		type: Module.Types.Array,
		defaultValue: ['home','test','contact'],
		arrType: Module.Types.Text
	},
	class: {
		type: Module.Types.Text,
		defaultValue: "blue-grey lighten-4"
		
	},
	position:{
		type:Module.Types.Text,
		defaultValue:"right"
	}
}

NavbarModule.Category = "sxoinas";

export default NavbarModule;