import React from 'react';
import PropTypes from 'prop-types';
import { noop } from 'node-noop';
import { Typography, Switch, Grid } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  title: {
    marginTop: theme.spacing.unit * 6,
    marginBottom: theme.spacing.unit * 6
  }
});

const FormTitle = ({
  classes, title, switchable, onChange, checked
}) => (
  <Grid
    container
    justify="space-between"
    alignItems="center"
  >
    <Typography
      variant="display1"
      color="inherit"
      className={classes.title}
    >
      {title}
    </Typography>
    {switchable ? (
      <Switch
        color="primary"
        checked={checked}
        onChange={() => onChange()}
      />
    ) : null}
  </Grid>
);
FormTitle.propTypes = {
  switchable: PropTypes.bool,
  checked: PropTypes.bool,
  onChange: PropTypes.func
};
FormTitle.defaultProps = {
  switchable: false,
  checked: false,
  onChange: noop
};

export default withStyles(styles)(FormTitle);