import React, { Component, PropTypes, cloneElement } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from './Action'
import NaviBar from './Component/NaviBar';
import auth from './Component/auth';
import './Stylesheets/app.css';
import 'babel-polyfill';

class App extends Component {
  static propTypes = {
    actions: PropTypes.object.isRequired
  }

  constructor(props) {
    super(props);
    this.state = {
      loggedIn: auth.loggedIn()
    }
  }

  render() {
    let layout = ''
    const childrenWithProps = React.Children.map(this.props.children,
        (child) => cloneElement(child, {
          actions: this.props.actions,
          results: this.props.results
        })
        ) 

    let pathname = this.props.location.pathname

    if (pathname === '/login'){
      layout =  <div>
                    <NaviBar/>
                    <div className='container content'>
                      <div className='row'>
                          <div className="col-md-4"></div>
                              <div className="col-md-4 col-sm-12">
                                {childrenWithProps}
                              </div>
                          <div className="col-md-4"></div>
                      </div>
                    </div>
                </div> 
    }else if (pathname === '/goodInfo') {
      layout =  <div>
                  {childrenWithProps}
                </div>
    }else {
      layout =  <div>
                  <NaviBar/>
                  <div className='container center-block content'>
                    <div className='row'>
                        <div className="col-md-12 col-sm-12">
                            {childrenWithProps}
                        </div>
                    </div>
                  </div> 
                </div>
    }
    return (
      <div>
        { layout }
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(actions, dispatch)
}) 

const mapStateToProps = state => {
  const { postsByReddit } = state
  let blogs = [], blog = {}, insert = 0, results = postsByReddit['results']
  if (results) {
    switch (results.type) {
      case actions.BLOGS:
        blogs = results.blogs
        break
      case actions.BLOG:
        blog = results.blog
        break
      case actions.BLOGINSERT:
        insert = results.insert
        break
      default:
        break
    }
  }
  return {
    results: {
      blogs, 
      blog,
      insert
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)
