import React from 'react'
import { connect } from 'react-redux'

import ListSubheader from 'material-ui/List/ListSubheader'
import List, { ListItem, ListItemText } from 'material-ui/List'

export default connect(mapStateToProps)(({
  room,
  motionsById
}) =>
  <List>
    <ListSubheader
      disableSticky
    >
      {'Motion'}
    </ListSubheader>
    <ListItem
      dense
    >
      <ListItemText
        primary={motionsById[room.motion].motion}
      />
    </ListItem>
  </List>
)

function mapStateToProps (state, ownProps) {
  return {
    motionsById: state.motions.data
  }
}
