import React, { Component } from 'react'
import { Repos, Settings, RepoAdd, UnsubscribeMessage } from './containers'
import { withStyles } from 'material-ui/styles'
import PropTypes from 'prop-types'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actionCreators from './actions'

class AppComponent extends Component {
  render () {
    const { classes } = this.props
    return (
      <div className={classes.app}>
        <RepoAdd className={classes.sectionContainer} />
        <div className={classes.container}>
          <Repos className={`${classes.sectionContainer} ${classes.repos}`} />
          <Settings className={classes.sectionContainer} />
        </div>
        <UnsubscribeMessage />
      </div>
    )
  }

  componentDidMount () {
    const jssStyles = document.getElementById('jss-server-side')
    if (jssStyles && jssStyles.parentNode) {
      jssStyles.parentNode.removeChild(jssStyles)
    }
    const { inited, email, fetchProfile } = this.props
    if (inited) {
      return this.processProfile({ email })
    }
    fetchProfile()
      .then(({ profile = {} }) => this.processProfile(profile))
  }

  processProfile ({ email }) {
    this.possiblyUnsubscribe(email)
    window.location.pathname === '/' || window.history.pushState(null, '', '/')
  }

  possiblyUnsubscribe (email) {
    const { pathname } = window.location
    if (pathname.indexOf('/unsubscribe/') !== 0) { return }
    const lambdajwt = (pathname.match(/^\/unsubscribe\/(.+)$/) || [0, 0])[1]
    if (!lambdajwt) { return }
    this.props.unsubscribe(email, lambdajwt)
  }
}

AppComponent.propTypes = {
  classes: PropTypes.object.isRequired,
  email: PropTypes.string.isRequired,
  inited: PropTypes.bool.isRequired
}

const styles = theme => ({
  app: {
    height: '100%',
    maxWidth: '900px',
    margin: '0 auto'
  },
  container: {
    '@media (min-width:700px)': {
      flexDirection: 'row'
    },
    display: 'flex',
    flexDirection: 'column'
  },
  sectionContainer: {
    '@media (min-width:700px)': {
      padding: theme.spacing.unit * 4,
      margin: theme.spacing.unit * 2
    },
    padding: theme.spacing.unit * 2,
    margin: theme.spacing.unit
  },
  repos: {
    flex: 1
  }
})

const AppComponentWithStyles = withStyles(styles)(AppComponent)

export const App = connect(
  state => ({
    email: state.email,
    inited: state.inited
  }),
  dispatch => bindActionCreators(actionCreators, dispatch)
)(AppComponentWithStyles)

@@ -477,32 +477,35 @@
 oAdd className=%7B
+%60$%7B
 classes.sectionC
@@ -505,32 +505,53 @@
 ectionContainer%7D
+ $%7Bclasses.repoAdd%7D%60%7D
  /%3E%0A        %3Cdiv
@@ -1814,24 +1814,53 @@
 (%7B%0A  app: %7B%0A
+    boxSizing: 'border-box',%0A
     height: 
@@ -1910,16 +1910,135 @@
 '0 auto'
+,%0A    paddingTop: theme.spacing.unit,%0A    '@media (min-width:700px)': %7B%0A      paddingTop: theme.spacing.unit * 2,%0A    %7D
 %0A  %7D,%0A  
@@ -2384,16 +2384,51 @@
 it%0A  %7D,%0A
+  repoAdd: %7B%0A    marginTop: 0%0A  %7D,%0A
   repos:

remove vertical scroll when there's enough space