text: import React, {useState} from 'react';
  import {Box, Button, Container, Grid, Typography} from '@material-ui/core';
  import FormLineInput from "../components/FormLineInput";
  import KeywordChips from "../components/KeywordChips";
  import FormTextInput from "../components/FormTextInput";
  import ImageUpload from "../components/ImageUpload";
  import {postDonator} from "../apiRequest";
  import {processImage} from "../util/processImage";
  
  
  const DonateForm = (
      {
          content,
          handleClose,
          setContent,
      }
      ) => {
  
      /* New Donation */
      const [title, setTitle] = useState('')
      const [name, setName] = useState('')
      const [emailAddress, setEmailAddress] = useState('')
      const [keywords, setKeywords] = useState([])
      const [comment, setComment] = useState('')
      const [image, setImage] = useState([])
  
  
      const handleFormSubmit = (e) => {
          e.preventDefault()
  
          processImage(image[0].file).then( img => {
              const newDonator = {
                  name: name,
                  title: title,
                  emailAddress: emailAddress,
                  comment: comment,
                  address: '',
                  donateeId: content.donatee.id,
                  keywords: keywords,
                  image: img
              }
  
              postDonator(newDonator)
                  .then(() => {
                      let newContent = content
                      newDonator.creationDate = new Date().toString()
                      newContent.donators.push(newDonator)
                      setContent(newContent)
                      handleClose()
                  })
          })
      }
  
  
      const handleKeywordChipClick = ( label ) => {
          let newKeywords = keywords
          keywords.includes( label ) ?
              newKeywords.filter( k => k !== label )
              : newKeywords.push( label )
          setKeywords(newKeywords)
      }
  
  
      return (
          <form className='add-form' onSubmit={ handleFormSubmit }>
              <Container maxWidth='xs'>
                  <Box my={ 5 }>
                      <Container>
                          <Grid container item spacing={ 5 } direction='column'>
  
                              {/*header*/}
                              <Grid item >
                                  <Typography variant='h4' color='secondary'>Pledge a donation</Typography>
                              </Grid>
  
                              {/*author*/}
                              <Grid item >
                                  <Typography variant='h6'>Author:</Typography>
                                  <Typography variant='subtitle2' color='secondary'>Who's donating?</Typography>
                                  <FormLineInput required
                                                 label='Your Name'
                                                 value={ name }
                                                 onChange={ setName }
                                                 maxLength={ 42 }
                                                 rows={ 1 }
                                  />
                              </Grid>
  
                              {/*Email*/}
                              <Grid item>
                                  <Typography variant='h6'>Email:</Typography>
                                  <Typography variant='subtitle2' color='secondary'>What is your email?</Typography>
                                  <FormLineInput required
                                      maxLength={42}
                                      rows={1}
                                      value={emailAddress}
                                      onChange={setEmailAddress}
                                  />
                              </Grid>
  
                              {/*title*/}
                              <Grid item >
                                  <Typography variant='h6'>Title:</Typography>
                                  <Typography variant='subtitle2' color='secondary'>What are you donating?</Typography>
                                  <FormLineInput required
                                                 label='Name the donation'
                                                 value={ title }
                                                 onChange={ setTitle }
                                                 maxLength={ 42 }
                                  />
                              </Grid>
  
                              {/*keywords*/}
                              <Grid item >
                                  <Typography variant='h6'>Keywords:</Typography>
                                  <Typography variant='subtitle2' color='secondary'>Describe this donation.</Typography>
                                  <Box mt={ 3 }>
                                      <KeywordChips keywords={ content.donatee.keywords }
                                                    clickable={ true }
                                                    onClick={ handleKeywordChipClick }
                                      />
                                  </Box>
                              </Grid>
  
                              {/*comment*/}
                              <Grid item container spacing={ 2 } direction='column' >
                                  <Grid item>
                                      <Typography variant='h6'>Comment:</Typography>
                                      <Typography variant='subtitle2' color='secondary'>Write a Comment</Typography>
                                  </Grid>
                                  <Grid item>
                                      <FormTextInput label={ `Dear ${ content.donatee.name } ...` }
                                                     value={ comment }
                                                     onChange={ setComment }
                                                     maxLength={ 256 }
                                                     rows={ 3 }
                                      />
                                  </Grid>
                              </Grid>
  
                              {/*image upload*/}
                              <Grid item>
                                  <ImageUpload required
                                               image={ image }
                                               setImage={ setImage }
                                  />
                              </Grid>
  
                              {/*submit*/}
                              <Grid item>
                                  <Button fullWidth
                                          type='submit'
                                          variant='contained'
                                          color='secondary'
                                          size='large'
                                  >
                                      Submit
                                  </Button>
                              </Grid>
  
                          </Grid>
                      </Container>
                  </Box>
              </Container>
          </form>
      );
  };
  
  export default DonateForm;
  