import React from 'react'
import IconButton from 'material-ui/IconButton'
import Paper from 'material-ui/Paper'
import DeleteIcon from 'material-ui-icons/Delete'
import { withStyles } from 'material-ui/styles'
import Typography from 'material-ui/Typography'
import PropTypes from 'prop-types'
import moment from 'moment'
import Radio, { RadioGroup } from 'material-ui/Radio'
import { FormLabel, FormControl, FormControlLabel } from 'material-ui/Form'
import Switch from 'material-ui/Switch'
import Hourpicker from '../components/Hourpicker'

import { connect } from 'react-redux'
import { mapDispatchToProps } from '../actions'

function Repos ({ signedIn, shownRepos, watching, toggleWatching, removeRepo, classes, className, frequency, checkAt, saveFrequency, saveCheckAt }) {
  const title = !shownRepos.length ?
    'Not watching any repo yet' :
    !signedIn ?
      'Sign in to start watching' :
      watching ? 'Watching' : 'Not watching'
  function handleFrequencyChange (e, frequency) {
    if (frequency !== 'daily') { return saveFrequency({ frequency }) }
    const checkAt = +moment('9', 'H').utc().format('H')
    saveFrequency({ frequency, checkAt })
  }
  const header = signedIn && shownRepos.length ? (
    <div>
      <FormControlLabel
        classes={{ label: classes.titleLabel }}
        control={
          <Switch
            checked={watching}
            onChange={toggleWatching}
          />
        }
        label={title}
      />
      {watching && <div>
        <FormControl component="div" style={{flexDirection: 'row', alignItems: 'center'}}>
          <RadioGroup
            aria-label="Check for updates"
            name="frequency"
            value={frequency}
            className={classes.frequencyOptions}
            onChange={handleFrequencyChange}
          >
            <FormControlLabel value="realtime" control={<Radio />} className={classes.hourlyOption} label="Realtime" />
            <FormControlLabel value="daily" control={<Radio />} className={classes.dailyOption} label="Daily" />
            {frequency === 'daily' && <Hourpicker utcHour={checkAt} onSave={saveCheckAt} />}
          </RadioGroup>
        </FormControl>
      </div>}
    </div>
  ) : (
    <Typography type="title">{title}</Typography>
  )
  return (
    <Paper className={className}>
      {header}
      {shownRepos.map(repo =>
        <div className={classes.item} key={repo}>
          <a href={`https://github.com/${repo}`} target="_blank">{repo}</a>
          <IconButton aria-label="Delete" onClick={() => removeRepo(repo)}>
            <DeleteIcon />
          </IconButton>
        </div>
      )}
    </Paper>
  )
}

Repos.propTypes = {
  className: PropTypes.string,
  signedIn: PropTypes.bool.isRequired,
  shownRepos: PropTypes.arrayOf(PropTypes.string).isRequired,
  removeRepo: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired,
  watching: PropTypes.bool.isRequired,
  toggleWatching: PropTypes.func.isRequired
}

const styles = theme => ({
  item: {
    display: 'flex',
    alignItems: 'center'
  },
  titleLabel: theme.typography.title,
  frequencyOptions: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  checkAtText: {
    cursor: 'pointer',
    textDecoration: 'underline'
  },
  hourlyOption: {
    marginLeft: 0
  },
  dailyOption: {
    marginRight: 0
  }
})

export default connect(
  state => ({
    signedIn: state.signedIn,
    shownRepos: state.shownRepos,
    watching: state.watching,
    frequency: state.frequency,
    checkAt: state.checkAt
  }),
  mapDispatchToProps()
)(withStyles(styles)(Repos))

@@ -3111,24 +3111,50 @@
 yOptions: %7B%0A
+    alignItems: 'center',%0A
     flexDire
@@ -3171,35 +3171,34 @@
 w',%0A    
-alignItems: 'center
+marginLeft: '-12px
 '%0A  %7D,%0A 

align watching options better