import { Col, Row } from 'react-bootstrap'
import { Content as ContentBox } from '../../components/Styled/Boxes'
import { Route, withRouter } from 'react-router-dom'
import About from '../About'
import ArticleBrowser from '../ArticleBrowser/ArticleBrowser'
import config from '../../../config/config'
import Portfolio from '../../containers/Portfolio/Portfolio'
import React from 'react'
import Sidebar from '../../components/Shell/Sidebar/Sidebar'
import SingleArticleBrowser from '../ArticleBrowser/SingleArticleBrowser'

const routes = config.get('site.routes')
const RootArticleBrowser = ArticleBrowser({ type: 'root' })
const CategoriesArticleBrowser = ArticleBrowser({ type: 'categories' })

const Content = () => {
  return (
    <ContentBox>
      <Row>
        <Col
          id="sidebarBox"
          md={4}
          mdPull={0}
          smHidden={true} // eslint-disable-line react/jsx-boolean-value
          style={{ float: 'right' }} // eslint-disable-line react/forbid-component-props
          xs={12}
          xsHidden={true} // eslint-disable-line react/jsx-boolean-value
        >
          <Route component={Sidebar} exact path={routes.about} />
          <Route component={Sidebar} exact path={routes.categories} />
          <Route component={Sidebar} exact path={routes.root} />
          <Route component={Sidebar} exact path={routes.singleArticle} />
          <Route component={Sidebar} path={routes.portfolio} />
        </Col>
        <Col
          md={8}
          style={{ float: 'left' }} // eslint-disable-line react/forbid-component-props
          xs={12}
        >
          <Route component={About} exact path={routes.about} />
          <Route component={CategoriesArticleBrowser} exact path={routes.categories} />
          <Route component={Portfolio} exact path={routes.portfolio} />
          <Route component={Portfolio} exact path={routes.portfolioTile} />
          <Route component={RootArticleBrowser} exact path={routes.root} />
          <Route component={SingleArticleBrowser} exact path={routes.singleArticle} />
        </Col>
      </Row>
    </ContentBox>
  )
}

export default withRouter(Content)
