text: import React, {useState} from 'react'
  import Card from '@material-ui/core/Card'
  import CardActions from '@material-ui/core/CardActions'
  import CardContent from '@material-ui/core/CardContent'
  import Button from '@material-ui/core/Button'
  import TextField from '@material-ui/core/TextField'
  import FileUpload from '@material-ui/icons/AddPhotoAlternate'
  import auth from './../auth/auth-helper'
  import Typography from '@material-ui/core/Typography'
  import Icon from '@material-ui/core/Icon'
  import { makeStyles } from '@material-ui/core/styles'
  import {create} from './api-product.js'
  import {Link, Redirect} from 'react-router-dom'
  
  const useStyles = makeStyles(theme => ({
    card: {
      maxWidth: 600,
      margin: 'auto',
      textAlign: 'center',
      marginTop: theme.spacing(5),
      paddingBottom: theme.spacing(2)
    },
    error: {
      verticalAlign: 'middle'
    },
    title: {
      marginTop: theme.spacing(2),
      color: theme.palette.openTitle,
      fontSize: '1.2em'
    },
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      width: 300
    },
    submit: {
      margin: 'auto',
      marginBottom: theme.spacing(2)
    },
    input: {
      display: 'none'
    },
    filename:{
      marginLeft:'10px'
    }
  }))
  
  export default function NewProduct({match}) {
    const classes = useStyles()
    const [values, setValues] = useState({
        name: '',
        description: '',
        image: '',
        category: '',
        quantity: '',
        price: '',
        redirect: false,
        error: ''
    })
    const jwt = auth.isAuthenticated()
    const handleChange = name => event => {
      const value = name === 'image'
        ? event.target.files[0]
        : event.target.value
      setValues({...values,  [name]: value })
    }
    const clickSubmit = () => {
      let productData = new FormData()
      values.name && productData.append('name', values.name)
      values.description && productData.append('description', values.description)
      values.image && productData.append('image', values.image)
      values.category && productData.append('category', values.category)
      values.quantity && productData.append('quantity', values.quantity)
      values.price && productData.append('price', values.price)
  
      create({
        shopId: match.params.shopId
      }, {
        t: jwt.token
      }, productData).then((data) => {
        if (data.error) {
          setValues({...values, error: data.error})
        } else {
          setValues({...values, error: '', redirect: true})
        }
      })
    }
  
      if (values.redirect) {
        return (<Redirect to={'/seller/shop/edit/'+match.params.shopId}/>)
      }
      return (<div>
        <Card className={classes.card}>
          <CardContent>
            <Typography type="headline" component="h2" className={classes.title}>
              New Product
            </Typography><br/>
            <input accept="image/*" onChange={handleChange('image')} className={classes.input} id="icon-button-file" type="file"/>
            <label htmlFor="icon-button-file">
              <Button variant="contained" color="secondary" component="span">
                Upload Photo
                <FileUpload/>
              </Button>
            </label> <span className={classes.filename}>{values.image ? values.image.name : ''}</span><br/>
            <TextField id="name" label="Name" className={classes.textField} value={values.name} onChange={handleChange('name')} margin="normal"/><br/>
            <TextField
              id="multiline-flexible"
              label="Description"
              multiline
              rows="2"
              value={values.description}
              onChange={handleChange('description')}
              className={classes.textField}
              margin="normal"
            /><br/>
            <TextField id="category" label="Category" className={classes.textField} value={values.category} onChange={handleChange('category')} margin="normal"/><br/>
            <TextField id="quantity" label="Quantity" className={classes.textField} value={values.quantity} onChange={handleChange('quantity')} type="number" margin="normal"/><br/>
            <TextField id="price" label="Price" className={classes.textField} value={values.price} onChange={handleChange('price')} type="number" margin="normal"/><br/>
            {
              values.error && (<Typography component="p" color="error">
                <Icon color="error" className={classes.error}>error</Icon>
                {values.error}</Typography>)
            }
          </CardContent>
          <CardActions>
            <Button color="primary" variant="contained" onClick={clickSubmit} className={classes.submit}>Submit</Button>
            <Link to={'/seller/shop/edit/'+match.params.shopId} className={classes.submit}><Button variant="contained">Cancel</Button></Link>
          </CardActions>
        </Card>
      </div>)
  }