import React from 'react';
import { Link } from 'react-router'

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import keycode from 'keycode';
import {Tabs, Tab} from 'material-ui/Tabs';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';
import Paper from 'material-ui/Paper';
import Snackbar from 'material-ui/Snackbar';

import Repo from './RepoPanel';
import RepoOps from './RepoOps';
import CommitTree from './CommitTreePanel';
import StagingArea from './StagingAreaPanel';

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
import injectTapEventPlugin from 'react-tap-event-plugin';

import Git from 'nodegit';

const darkMuiTheme = getMuiTheme(darkBaseTheme);

const constStyles = {
  fontFamily: `apple-system,
          BlinkMacSystemFont,"Segoe UI",
          Roboto,Helvetica,Arial,sans-serif,
          "Apple Color Emoji","Segoe UI Emoji",
          "Segoe UI Symbol"`,
  darkRed: '#b60a0a',
};

class gitFunctions {
  static repoExists(path) {
    const pathToRepo = require('path').resolve(path);

    return Git.Repository.open(pathToRepo);
  }
}

class MainToolbar extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      toggle: false
    };
  }

  changeToolbar = (label) => {
    this.props.changeToolbar(label);
  }

  render = () => {
    const styles = {
      toolbar:{
        display: 'flex',
        alignItems: 'center',
        backgroundColor: '#EAEAEA',
        padding: 12,
        paddingLeft: '5%',
        border: '2px solid #EAEAEA',
        height: 40,
      },
      button: {
        position: 'relative',
        margin: 35,
        borderRadius: 4,
        marginRight: 5,
        marginLeft: 5,
        fontFamily: `'Oswald', sans-serif`,
        fontSize: 17,
        maxWidth: 140,
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textTransform: 'uppercase',
        color: '#656565',
        textDecoration: 'none',
        padding: 7,
        paddingLeft: 13,
        paddingRight: 13,
        backgroundColor: '#ffffff',
      }
    };

    return (
        <div style={styles.toolbar}>
          <Link style={styles.button}
          to='/repo'>
            {'Repos'}
          </Link>

          {this.props.repoName?
          <Link to='/repoOps'
          style={styles.button}>
            {this.props.repoName}
          </Link>
            :<div />}
        </div>
    );
  }
} 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  
      currRepoIndex: -1, 
      repos: [],
      openWrongDirSnackBar: false,
    };
  }

  static contextTypes = {
    router: React.PropTypes.object
  };

  handleKeyPressChange = (passedPath) => {
    //TODO: Check if passed path is valid or not
    //extracts the name of the repo from the path name
    const repoName = passedPath.slice(passedPath.lastIndexOf('/')+1);
    let flag = false;
    let pos;

    this.state.repos.forEach( (repo, index) => {

      //if repo already exists in the state
      if(repo.path === passedPath) {
        pos = index;
        flag = true;
      }
    });

    if( flag ) {
      this.setState({
        currRepoIndex: pos
      });
    }
    else
    {
      //checks if the folder contains a git repo
      let promise = gitFunctions.repoExists(passedPath);
      promise.then( () => {
        let repos = this.state.repos;
        repos.push({
          name: repoName,
          path: passedPath
        });
        let repoIndex = repos.length - 1;

        this.setState({
          currRepoIndex: repoIndex,
          repos: repos
        });
        this.changeToolbar(repoName);
        this.context.router.push('/repoOps');

      })
      .catch( (failure) => {
        console.log('Could not find a git repository in the folder',
          'Make sure you have selected the correct folder');
        console.log('failure',failure);
        this.setState({
          openWrongDirSnackBar: true
        });
      });
    }
  }

  handleRepoClick = (index) => {
    window.setTimeout( () => {
      this.setState({
        currRepoIndex: index
      });
      this.changeToolbar(this.state.repos[index].name);
    },0);
  }

  changeToolbar = (label) => {

  }

  handleRequestClose = () => {
    this.setState({
      openWrongDirSnackBar: false 
    });
  }

  componentWillMount = () => {
    injectTapEventPlugin();
    this.handleKeyPressChange('../dummy-repo');
  }

  componentWillReceiveProps = (newprops) => {
  }

  //for dev prurposes only
  componentDidMount = () => {
  }

  render() {

    const styles = {
      mainPanel: {
        height:'100%',
        // border: '1px solid blue',
        overflow: 'hidden',
      },
      font: {
        fontFamily: '"Roboto", sans-serif',
      },
    };

    const wrongDirError = 'Could not find a git repository in the folder. Make sure you have selected the correct folder';

    let renderRepo = this.state.repos[this.state.currRepoIndex]?this.state.repos[this.state.currRepoIndex]:null;

    let children = React.Children.map( this.props.children, child => {
      if(child.type === Repo) {

        return React.cloneElement(child, {
          repos: this.state.repos,
          pathToRepo: renderRepo? renderRepo.path: '',
          selectRepo: this.handleRepoClick,
          onKeyPress: this.handleKeyPressChange,
        });

      }
      else if(child.type === RepoOps) {

        return React.cloneElement(child, {
          repo: renderRepo,
        });

      }
    });

    return (
      <MuiThemeProvider muiTheme={getMuiTheme()}>
        <div style={{width: '100%', height: '100vh'}} >
          <MainToolbar repoName={renderRepo? renderRepo.name: ''} />
          <div style={styles.mainPanel} >
          <Snackbar open={this.state.openWrongDirSnackBar} message={wrongDirError} autoHideDuration={4000}
          style={styles.font} onRequestClose={this.handleRequestClose}/>
          {children || <Repo repos={this.state.repos} pathToRepo={renderRepo? renderRepo.path: ''}
            selectRepo={this.handleRepoClick} onKeyPress={this.handleKeyPressChange}/>}
          </div>
        </div>
      </MuiThemeProvider>
    )
  }

}

export default App;
@@ -4836,16 +4836,65 @@
 ugin();%0A
+    if(process.env.NODE_ENV === 'development')%0A  
     this

Add dummy-repo by default in dev env only