import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import { Button } from '@material-ui/core'
import { FormControl, Input, InputLabel, FormHelperText } from '@material-ui/core'


const styles = theme => ({
  container: {
    display: 'inline',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    display: 'inline-block',
    width: 200,
  },
  dense: {
    marginTop: 19,
  },
  menu: {
    width: 200,
  },
  fullWidth: {
    width: '100%'
  },
  blackText: {
    color: 'black'
  },
  floatLeft: {
    float: 'left',
    display: 'inline'
  }
});

const cats = [
  'Cool Cat',
  'Bad Kitty',
  'King of the Jungle',
  'Incel cat',
  'C-ch-at-d',
  'Decadent feline',
  'Trapped in the litter box',
  'All claw and no meow'
]


class TextFields extends React.Component {
  state = {
    name: 'The Grinch',
    cat: '',
    significantOther: false
  };

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value,
    });
  };

  handleFoodSelect = (event) => {
    this.setState({cat: event.target.value})
  }

  handleSignificantOther = () => {
    this.setState({significantOther: !this.state.significantOther})
  }

  Cats = () => {
    const items = []
    for (let i = 0; i < cats.length; i++) {
      items.push(<MenuItem key={i} value={cats[i]}>{cats[i]}</MenuItem>)
    }

    return items
  }

  submitForm = async () => {
    console.log(this.state)
    const response = await fetch('http://localhost:3002/test', {
      method: 'get'
    })
    console.log(response)
  }

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
      <div style={styles.fullWidth}>
          <InputLabel htmlFor="attendee-name">Who do you think you are?</InputLabel>

          <TextField
            id="attendee-name"
            label="Name"
            className={classes.textField}
            value={this.state.name}
            onChange={this.handleChange('name')}
            margin="normal"
          />
      </div>
      <br />
      <div style={styles.fullWidth}>
        <InputLabel htmlFor="significant-other" style={{float: 'left'}}>Bringing someone?</InputLabel>
        <input
            id="significant-other"
            name="Significant Other"
            type="checkbox"
            className={classes.textField}
            style={{verticalAlign: 'top', marginLeft: '-10em'}}
            checked={this.state.significantOther}
            onChange={this.handleSignificantOther} />
      </div>
          <FormControl className='food-select'>
            <InputLabel htmlFor="food-helper">What sort of cat are you?</InputLabel>
            <Select
              value={this.state.foodItem}
              onChange={this.handleFoodSelect}
              input={<Input name="food" id="food-helper" value={this.state.foodItem}/>}
            >
              <MenuItem value="">
                <em>The hell you talking about</em>
              </MenuItem>
              {this.Cats()}
            </Select>
            <FormHelperText>Calling all cats and jive turkeys</FormHelperText>
          </FormControl>
          <br />
          <Button style={{marginTop: '1.25em'}}onClick={this.submitForm}> Click to Confirm Attendance </Button>

      </form>
    );
  }
}

TextFields.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(TextFields);