text: import React from 'react';
  import { useHistory } from 'react-router';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import * as Yup from 'yup';
  import { Formik } from 'formik';
  import { useSnackbar } from 'notistack';
  import {
    Box,
    Button,
    Card,
    CardContent,
    CardHeader,
    Checkbox,
    Divider,
    FormControlLabel,
    FormHelperText,
    Grid,
    Paper,
    TextField,
    Typography,
    makeStyles
  } from '@material-ui/core';
  import QuillEditor from 'src/components/QuillEditor';
  import FilesDropzone from 'src/components/FilesDropzone';
  
  const categories = [
    {
      id: 'shirts',
      name: 'Shirts'
    },
    {
      id: 'phones',
      name: 'Phones'
    },
    {
      id: 'cars',
      name: 'Cars'
    }
  ];
  
  const useStyles = makeStyles(() => ({
    root: {},
    editor: {
      '& .ql-editor': {
        height: 400
      }
    }
  }));
  
  function ProductCreateForm({ className, ...rest }) {
    const classes = useStyles();
    const history = useHistory();
    const { enqueueSnackbar } = useSnackbar();
  
    return (
      <Formik
        initialValues={{
          category: '',
          description: '',
          images: [],
          includesTaxes: false,
          isTaxable: false,
          name: '',
          price: '',
          productCode: '',
          productSku: '',
          salePrice: ''
        }}
        validationSchema={Yup.object().shape({
          category: Yup.string().max(255),
          description: Yup.string().max(5000),
          images: Yup.array(),
          includesTaxes: Yup.bool().required(),
          isTaxable: Yup.bool().required(),
          name: Yup.string().max(255).required(),
          price: Yup.number().min(0).required(),
          productCode: Yup.string().max(255),
          productSku: Yup.string().max(255),
          salePrice: Yup.number().min(0)
        })}
        onSubmit={async (values, {
          setErrors,
          setStatus,
          setSubmitting
        }) => {
          try {
            // Do api call
            setStatus({ success: true });
            setSubmitting(false);
            enqueueSnackbar('Product Created', {
              variant: 'success'
            });
            history.push('/app/products');
          } catch (err) {
            setErrors({ submit: err.message });
            setStatus({ success: false });
            setSubmitting(false);
          }
        }}
      >
        {({
          errors,
          handleBlur,
          handleChange,
          handleSubmit,
          isSubmitting,
          setFieldValue,
          touched,
          values
        }) => (
          <form
            onSubmit={handleSubmit}
            className={clsx(classes.root, className)}
            {...rest}
          >
            <Grid
              container
              spacing={3}
            >
              <Grid
                item
                xs={12}
                lg={8}
              >
                <Card>
                  <CardContent>
                    <TextField
                      error={Boolean(touched.name && errors.name)}
                      fullWidth
                      helperText={touched.name && errors.name}
                      label="Product Name"
                      name="name"
                      onBlur={handleBlur}
                      onChange={handleChange}
                      value={values.name}
                      variant="outlined"
                    />
                    <Box
                      mt={3}
                      mb={1}
                    >
                      <Typography
                        variant="subtitle2"
                        color="textSecondary"
                      >
                        Description
                      </Typography>
                    </Box>
                    <Paper variant="outlined">
                      <QuillEditor
                        className={classes.editor}
                        value={values.description}
                        onChange={(value) => setFieldValue('description', value)}
                      />
                    </Paper>
                    {(touched.description && errors.description) && (
                      <Box mt={2}>
                        <FormHelperText error>
                          {errors.description}
                        </FormHelperText>
                      </Box>
                    )}
                  </CardContent>
                </Card>
                <Box mt={3}>
                  <Card>
                    <CardHeader title="Upload Images" />
                    <Divider />
                    <CardContent>
                      <FilesDropzone />
                    </CardContent>
                  </Card>
                </Box>
                <Box mt={3}>
                  <Card>
                    <CardHeader title="Prices" />
                    <Divider />
                    <CardContent>
                      <Grid
                        container
                        spacing={3}
                      >
                        <Grid item xs={12} md={6}>
                          <TextField
                            error={Boolean(touched.price && errors.price)}
                            fullWidth
                            helperText={touched.price && errors.price
                              ? errors.price
                              : 'If you have a sale price this will be shown as old price'}
                            label="Price"
                            name="price"
                            type="number"
                            onBlur={handleBlur}
                            onChange={handleChange}
                            value={values.price}
                            variant="outlined"
                          />
                        </Grid>
                        <Grid item xs={12} md={6}>
                          <TextField
                            error={Boolean(touched.salePrice && errors.salePrice)}
                            fullWidth
                            helperText={touched.salePrice && errors.salePrice}
                            label="Sale price"
                            name="salePrice"
                            type="number"
                            onBlur={handleBlur}
                            onChange={handleChange}
                            value={values.salePrice}
                            variant="outlined"
                          />
                        </Grid>
                      </Grid>
                      <Box mt={2}>
                        <FormControlLabel
                          control={(
                            <Checkbox
                              checked={values.isTaxable}
                              onChange={handleChange}
                              value={values.isTaxable}
                              name="isTaxable"
                            />
                          )}
                          label="Product is taxable"
                        />
                      </Box>
                      <Box mt={2}>
                        <FormControlLabel
                          control={(
                            <Checkbox
                              checked={values.includesTaxes}
                              onChange={handleChange}
                              value={values.includesTaxes}
                              name="includesTaxes"
                            />
                          )}
                          label="Price includes taxes"
                        />
                      </Box>
                    </CardContent>
                  </Card>
                </Box>
              </Grid>
              <Grid
                item
                xs={12}
                lg={4}
              >
                <Card>
                  <CardHeader title="Organize" />
                  <Divider />
                  <CardContent>
                    <TextField
                      fullWidth
                      label="Category"
                      name="category"
                      onChange={handleChange}
                      select
                      SelectProps={{ native: true }}
                      value={values.category}
                      variant="outlined"
                    >
                      {categories.map((category) => (
                        <option
                          key={category.id}
                          value={category.id}
                        >
                          {category.name}
                        </option>
                      ))}
                    </TextField>
                    <Box mt={2}>
                      <TextField
                        error={Boolean(touched.productCode && errors.productCode)}
                        fullWidth
                        helperText={touched.productCode && errors.productCode}
                        label="Product Code"
                        name="productCode"
                        onBlur={handleBlur}
                        onChange={handleChange}
                        value={values.productCode}
                        variant="outlined"
                      />
                    </Box>
                    <Box mt={2}>
                      <TextField
                        error={Boolean(touched.productSku && errors.productSku)}
                        fullWidth
                        helperText={touched.productSku && errors.productSku}
                        label="Product Sku"
                        name="productSku"
                        onBlur={handleBlur}
                        onChange={handleChange}
                        value={values.productSku}
                        variant="outlined"
                      />
                    </Box>
                  </CardContent>
                </Card>
              </Grid>
            </Grid>
            {errors.submit && (
              <Box mt={3}>
                <FormHelperText error>
                  {errors.submit}
                </FormHelperText>
              </Box>
            )}
            <Box mt={2}>
              <Button
                color="secondary"
                variant="contained"
                type="submit"
                disabled={isSubmitting}
              >
                Create product
              </Button>
            </Box>
          </form>
        )}
      </Formik>
    );
  }
  
  ProductCreateForm.propTypes = {
    className: PropTypes.string
  };
  
  export default ProductCreateForm;
  