content: import React from 'react'
  import { connect } from 'react-redux'
  import withStyles from 'material-ui/styles/withStyles'
  
  import Typography from 'material-ui/Typography'
  import { LinearProgress } from 'material-ui/Progress'
  
  import CreateBreaks from './CreateBreaks'
  import ViewBreaks from './ViewBreaks'
  
  import ResponsivePageHeader from 'components/ResponsivePageHeader'
  
  const styles = theme => ({
    root: {
      [theme.breakpoints.down('sm')]: {
        paddingLeft: theme.spacing.unit,
        paddingRight: theme.spacing.unit
      },
      [theme.breakpoints.between('sm', 'lg')]: {
        paddingLeft: theme.spacing.unit * 4,
        paddingRight: theme.spacing.unit * 4
      },
      [theme.breakpoints.up('lg')]: {
        paddingLeft: theme.spacing.unit * 8,
        paddingRight: theme.spacing.unit * 8
      }
    }
  })
  
  export default connect(mapStateToProps)(withStyles(styles)(({
    breakTeams,
    breakCategories,
    match,
    classes,
    teamsIsFetching
  }) => {
    const breakCategoryId = match.params.breakCategoryId
    const findBreakCategory = breakCategoryToMatch => breakCategoryToMatch._id === breakCategoryId
    const breakCategory = breakCategories.find(findBreakCategory)
  
    const filterBreakTeams = breakTeamToMatch => breakTeamToMatch.breakCategory === breakCategoryId
    const breakTeamsThisBreakCategory = breakTeams.filter(filterBreakTeams)
  
    return (
      <div
        className={classes.root}
      >
        <ResponsivePageHeader
          text={`${breakCategory.name} breaking teams`}
        />
        {teamsIsFetching &&
          <div>
            <Typography
              variant={'display2'}
              gutterBottom
            >
              {'Fetching latest team standings'}
            </Typography>
            <LinearProgress
              color={'secondary'}
            />
          </div>
        }
        {!teamsIsFetching && breakTeamsThisBreakCategory.length === 0 &&
          <CreateBreaks
            breakCategory={breakCategory}
          />
        }
        {!teamsIsFetching && breakTeamsThisBreakCategory.length !== 0 &&
          <ViewBreaks
            breakCategory={breakCategory}
          />
        }
      </div>
    )
  }))
  
  function mapStateToProps (state, ownProps) {
    return {
      breakTeams: Object.values(state.breakTeams.data),
      breakCategories: Object.values(state.breakCategories.data),
      teamsIsFetching: state.standings.teamsIsFetching
    }
  }
  