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'
import { black } from 'ansi-colors';


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

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

const partyHosts = ['In-Young', 'Emmanuel']

const MakeAttendees = (attendees) => {
  const items = []
  if (attendees) {
    for (let i = 0; i < attendees.length; i++) {
      items.push(<div style={{flex: 1}}key={i}>{i+1}. <div>Name: <span className='attendee-name'>{attendees[i].name}</span></div><div>Type: <span className='attendee-name'>{attendees[i].cat ? attendees[i].cat : 'Cat hater'}</span></div>{partyHosts.indexOf(attendees[i].name) < 0 && attendees[i].guest ? <div><span className='attendee-name'> ...with an extra guest!! ;)</span> </div> : '' }
      <br /><br /></div>)
    }
  }
  return (<div style={{display: 'block', color: 'black', fontSize: '50%', textAlign: 'left'}}>{items}</div>)
}


class TextFields extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      name: '',
      cat: '',
      significantOther: false,
      attendees: undefined
    }
  }

  async componentDidMount () {
    this.setState({
      attendees: MakeAttendees(await this.fetchAttendees())
    })
  }

  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 () => {
    if (this.state.name && this.state.name.length > 0) {
      const body = JSON.stringify({
        name: this.state.name,
        cat: this.state.cat,
        guest: this.state.significantOther,
      })

      const response = await fetch('/attendee', {
        method: 'post',
        body: body,
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      })

      if (!response.error) {
        console.log('Success')
        this.setState({attendees: MakeAttendees(await this.fetchAttendees())})
        addHugeAssImage()
      }
    }
  }

  fetchAttendees = async () => {
    let attendees
    await fetch('/list', {
      method: 'get',
    }).then(data => {
      data.json().then(finalData => {
          attendees = finalData.attendees
      })
    })
    return attendees
  }

  updateAttendees = async () => {
    this.setState({ attendees: MakeAttendees(await this.fetchAttendees())})
  }

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

    return (
      <div id='form-wrap'>
      <form className={classes.container} noValidate autoComplete="off">
      <div className='name-wrap' id='name-wrap' style={styles.fullWidth}>
          <InputLabel id='name-label' htmlFor="attendee-name">Name</InputLabel>

          <TextField
            id="attendee-name"
            label=""
            className={classes.textField}
            value={this.state.name}
            onChange={this.handleChange('name')}
            margin="normal"
          />
      </div>
      <FormControl className='food-select'>
        <InputLabel htmlFor="food-helper">What sort of cat are you?</InputLabel>
        <Select
          value={this.state.cat}
          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>
      <div style={styles.fullWidth}>
      <br />
        <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'}}
            checked={this.state.significantOther}
            onChange={this.handleSignificantOther} />
      </div>
          <br />
          <Button onClick={this.submitForm}> Click to Confirm Attendance </Button>
          <br />
      </form>
      <h5 style={{color: '#901a23', marginTop: '24px', marginBottom: '16px', padding: '4px'}}>Such lovely people, these:</h5>
        {this.state.attendees}
      </div>
    );
  }
}

function addHugeAssImage() {
  setTimeout(() => {
    const image = document.createElement('img')
    image.id ='hugeAssImage'
    image.src = require('./santa-sack.jpg')
    document.getElementById('form-wrap').appendChild(image)
  }, 1200)
}

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

export default withStyles(styles)(TextFields);