import React from 'react';
import { connect } from 'react-redux';
import AppBar from 'material-ui/AppBar';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import { Grid, Row, Col } from 'react-flexbox-grid/lib/index';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import ExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import Face from 'material-ui/svg-icons/action/face';
import ImportContacts from 'material-ui/svg-icons/communication/import-contacts';
import LibraryBooks from 'material-ui/svg-icons/av/library-books';
import Motorcycle from 'material-ui/svg-icons/action/motorcycle';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import log from 'loglevel';
import Networks from 'lib/networks';
import { switchChain } from 'store/networkActions';
import { gotoScreen } from 'store/screenActions';
import './main.scss';
import Screen from './screen';

const Menu = ({openAccounts, openAddressBook, openContracts, switchChain, networks, chain}) => (
  <IconMenu
    iconButtonElement={
      <IconButton><ExpandMoreIcon color="white" /></IconButton>
    }
    targetOrigin={{ horizontal: 'right', vertical: 'top' }}
    anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
  >
    <MenuItem leftIcon={<Face />} primaryText="Home" onClick={openAccounts} />
    <MenuItem leftIcon={<ImportContacts />} primaryText="Address Book" onClick={openAddressBook} />
    <MenuItem leftIcon={<LibraryBooks />} primaryText="Contracts" onClick={openContracts} />
    <MenuItem 
        leftIcon={<Motorcycle />} 
        primaryText="Network" 
        rightIcon={<ArrowDropRight />}
        menuItems=
            {networks.map( (net) => 
              <MenuItem 
                key={net.get('id')} 
                primaryText={net.get('name')}
                checked={(net.get('name')===chain)}
                onClick={() => (net.get('name')!==chain) && switchChain(net)}
              />,  
            )}
          
    />    
  </IconMenu>
);

const Render = (props) => (
    <Grid>
        <Row>
            <Col xs={12}>
            <AppBar
                title="Emerald - Ethereum Classic Wallet"
                iconElementLeft={<IconButton><Face color="white" /></IconButton>}
                iconElementRight={<Menu {...props}/>}
            />
            </Col>
        </Row>
        <Row>
            <Col xs={12}>
                <Screen id="body"/>
            </Col>
        </Row>
        <Row>
            <Col xs={12}>
                <div id="footer">
                    Emerald Wallet, Ethereum Classic, 2017<br/>
                    <FlatButton label="Fork on GitHub"
                                backgroundColor="#505050"
                                href="https://github.com/ethereumproject/emerald-wallet"
                                icon={<FontIcon className="fa fa-github" />}/>
                </div>
            </Col>
        </Row>
    </Grid>
);

const Main = connect(
    (state, ownProps) => ({
        chain: (state.network.get('chain') || {}).get('name'),
        networks: Networks
    }),
    (dispatch, ownProps) => ({
        openAccounts: () => {
            console.log("accounts")
            dispatch(gotoScreen('home'))
        },
        openAddressBook: () => {
            console.log("address book")
            dispatch(gotoScreen('address-book'))
        },
        openContracts: () => {
            console.log("contracts")
            dispatch(gotoScreen('contracts'))
        },
        switchChain: (network) => {
            dispatch(switchChain(network.get('name'), network.get('id')))
        }
    })
)(Render);

export default Main;

@@ -1056,16 +1056,17 @@
 enu = (%7B
+ 
 openAcco
@@ -1131,16 +1131,17 @@
 s, chain
+ 
 %7D) =%3E (%0A
@@ -1647,33 +1647,32 @@
 /%3E%0A    %3CMenuItem
- 
 %0A        leftIco
@@ -1689,17 +1689,16 @@
 ycle /%3E%7D
- 
 %0A       
@@ -1719,17 +1719,16 @@
 Network%22
- 
 %0A       
@@ -1808,17 +1808,16 @@
 map(
- 
 (net) =%3E
  %0A  
@@ -1812,17 +1812,16 @@
 (net) =%3E
- 
 %0A       
@@ -1836,17 +1836,16 @@
 MenuItem
- 
 %0A       
@@ -1872,17 +1872,16 @@
 t('id')%7D
- 
 %0A       
@@ -1964,11 +1964,13 @@
 me')
+ 
 ===
+ 
 chai
@@ -2024,11 +2024,13 @@
 me')
+ 
 !==
+ 
 chai
@@ -2073,11 +2073,8 @@
   /%3E
-,  
 %0A   
@@ -2089,29 +2089,15 @@
  )%7D%0A
-          
 %0A    /%3E
-    
 %0A  %3C
@@ -3194,16 +3194,17 @@
 Networks
+,
 %0A    %7D),
@@ -3281,29 +3281,26 @@
     
-console.log(%22
+log.info('
 accounts
 %22)%0A 
@@ -3295,18 +3295,19 @@
 accounts
-%22)
+');
 %0A       
@@ -3339,16 +3339,17 @@
 'home'))
+;
 %0A       
@@ -3397,29 +3397,26 @@
         
-console.log(%22
+log.info('
 address 
@@ -3419,18 +3419,19 @@
 ess book
-%22)
+');
 %0A       
@@ -3471,16 +3471,17 @@
 -book'))
+;
 %0A       
@@ -3531,21 +3531,18 @@
     
-console.log(%22
+log.info('
 cont
@@ -3550,10 +3550,11 @@
 acts
-%22)
+');
 %0A   
@@ -3595,16 +3595,17 @@
 racts'))
+;
 %0A       
@@ -3717,16 +3717,17 @@
 ('id')))
+;
 %0A       
@@ -3724,24 +3724,25 @@
 );%0A        %7D
+,
 %0A    %7D)%0A)(Re

fix some basic eslint issues