text: /* eslint-disable react/display-name */
  import React, { useState, forwardRef } from 'react';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import moment from 'moment';
  import uuid from 'uuid/v1';
  import { makeStyles } from '@material-ui/styles';
  import {
    Card,
    CardContent,
    CardActions,
    Typography,
    TextField,
    Button,
    Divider,
    colors
  } from '@material-ui/core';
  import FilesDropzone from 'src/components/FilesDropzone';
  
  const useStyles = makeStyles(theme => ({
    root: {
      position: 'absolute',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      outline: 'none',
      boxShadow: theme.shadows[20],
      width: 700,
      maxHeight: '100%',
      overflowY: 'auto',
      maxWidth: '100%'
    },
    field: {
      marginTop: theme.spacing(3)
    },
    cancelButton: {
      marginLeft: 'auto'
    },
    confirmButton: {
      color: theme.palette.common.white,
      backgroundColor: colors.green[600],
      '&:hover': {
        backgroundColor: colors.green[900]
      }
    }
  }));
  
  const defaultEvent = {
    title: 'Event title',
    desc: 'Event description',
    allDay: false,
    start: moment().toDate(),
    end: moment().toDate()
  };
  
  const AddEditEvent = forwardRef((props, ref) => {
    const { event, onCancel, onAdd, className, ...rest } = props;
    const classes = useStyles();
    const [values, setValues] = useState(event || { ...defaultEvent });
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const mode = event ? 'edit' : 'add';
  
    const handleFieldChange = e => {
      e.persist();
      setValues(prevValues => ({
        ...prevValues,
        [e.target.name]:
          e.target.type === 'checkbox' ? e.target.checked : e.target.value
      }));
    };
  
    const handleAdd = () => {
      if (!values.title || !values.desc) {
        return;
      }
  
      onAdd({ ...values, id: uuid() });
    };
  
    return (
      <Card {...rest} className={clsx(classes.root, className)} ref={ref}>
        <form>
          <CardContent>
            <Typography align="center" gutterBottom variant="h3">
              {mode === 'add' ? 'Add Event' : 'Edit Event'}
            </Typography>
            <TextField
              className={classes.field}
              fullWidth
              label="File name?"
              name="name"
              onChange={handleFieldChange}
              defaultValue={title}
              variant="outlined"
            />
            <TextField
              className={classes.field}
              fullWidth
              label="Description?"
              name="desc"
              onChange={handleFieldChange}
              defaultValue={description}
              variant="outlined"
            />
            <FilesDropzone className={classes.field} />
          </CardContent>
          <Divider />
          <CardActions>
            <Button
              className={classes.cancelButton}
              onClick={onCancel}
              variant="contained"
            >
              Cancel
            </Button>
            <Button
              className={classes.confirmButton}
              onClick={handleAdd}
              variant="contained"
              background="primary"
            >
              Add
            </Button>
          </CardActions>
        </form>
      </Card>
    );
  });
  
  AddEditEvent.propTypes = {
    className: PropTypes.string,
    event: PropTypes.object,
    onAdd: PropTypes.func,
    onCancel: PropTypes.func,
    onDelete: PropTypes.func,
    onEdit: PropTypes.func
  };
  
  export default AddEditEvent;
  