1import React, {useState} from 'react';
  2import Dialog from '@material-ui/core/Dialog';
  3import DialogActions from '@material-ui/core/DialogActions';
  4import DialogContent from '@material-ui/core/DialogContent';
  5import DialogContentText from '@material-ui/core/DialogContentText';
  6import DialogTitle from '@material-ui/core/DialogTitle';
  7import Button from '@material-ui/core/Button';
  8import Slide from '@material-ui/core/Slide';
  9import moment from 'moment';
 10import {useStrapi} from 'strapi-react-context';
 11import {useTranslation} from 'react-i18next';
 12import TextField from '@material-ui/core/TextField';
 13import Slider from '@material-ui/core/Slider';
 14import Typography from '@material-ui/core/Typography';
 15import {makeStyles} from '@material-ui/core/styles';
 16import {DateTimePicker} from '@material-ui/pickers';
 17import {useToast} from '../../contexts/Toast';
 18
 19const Transition = React.forwardRef(function Transition(props, ref) {
 20  return <Slide direction="up" ref={ref} {...props} />;
 21});
 22
 23const marks = [1, 2, 3, 4, 5, 6, 7, 8].map(value => ({
 24  value,
 25  label: value,
 26}));
 27
 28const NewCarDialog = ({open, toggle}) => {
 29  const strapi = useStrapi();
 30  const {t} = useTranslation();
 31  const classes = useStyles();
 32  const {addToast} = useToast();
 33
 34  // States
 35  const [name, setName] = useState('');
 36  const [seats, setSeats] = useState(4);
 37  const [meeting, setMeeting] = useState('');
 38  const [date, setDate] = useState(moment());
 39  const [phone, setPhone] = useState('');
 40  const [details, setDetails] = useState('');
 41
 42  const canCreate = !!name && !!seats;
 43
 44  const onCreate = async e => {
 45    if (e.preventDefault) e.preventDefault();
 46    try {
 47      await strapi.services.cars.create({
 48        name,
 49        seats,
 50        meeting,
 51        departure: date.toISOString(),
 52        phone_number: phone,
 53        details,
 54        event: event.id,
 55      });
 56      addToast(t('car.creation.created'));
 57      toggle();
 58    } catch (error) {
 59      console.error(error);
 60      addToast(t('car.errors.cant_create'));
 61    }
 62    return false;
 63  };
 64
 65  return (
 66    <Dialog
 67      open={open}
 68      TransitionComponent={Transition}
 69      onClose={toggle}
 70      fullWidth
 71      maxWidth="sm"
 72    >
 73      <form onSubmit={onCreate}>
 74        <DialogTitle>{t('car.creation.title')}</DialogTitle>
 75        <DialogContent>
 76          <DialogContentText>
 77            <TextField
 78              className={classes.textField}
 79              label={t('car.creation.name')}
 80              fullWidth
 81              autoFocus
 82              margin="dense"
 83              value={name}
 84              onChange={e => setName(e.target.value)}
 85              id="NewCarName"
 86              name="name"
 87            />
 88            <Typography variant="caption">{t('car.creation.seats')}</Typography>
 89            <Slider
 90              value={seats}
 91              onChange={(e, value) => setSeats(value)}
 92              step={1}
 93              marks={marks}
 94              min={1}
 95              max={marks.length}
 96              valueLabelDisplay="auto"
 97            />
 98            <TextField
 99              className={classes.textField}
100              label={t('car.creation.meeting')}
101              fullWidth
102              margin="dense"
103              multiline
104              rows={2}
105              value={meeting}
106              onChange={e => setMeeting(e.target.value)}
107              id="NewCarMeeting"
108              name="meeting"
109            />
110            <DateTimePicker
111              label={t('event.creation.date')}
112              value={date}
113              onChange={setDate}
114              className={classes.textField}
115              fullWidth
116              format="LLLL"
117              disablePast
118              id="NewCarDateTime"
119              name="date"
120            />
121            <TextField
122              className={classes.textField}
123              label={t('car.creation.phone')}
124              fullWidth
125              margin="dense"
126              value={phone}
127              onChange={e => setPhone(e.target.value)}
128              id="NewCarPhone"
129              name="phone"
130            />
131            <TextField
132              className={classes.textField}
133              label={t('car.creation.notes')}
134              fullWidth
135              margin="dense"
136              multiline
137              rows={2}
138              value={details}
139              onChange={e => setDetails(e.target.value)}
140              id="NewCarDetails"
141              name="details"
142            />
143          </DialogContentText>
144        </DialogContent>
145        <DialogActions>
146          <Button id="NewCarCancel" onClick={toggle} tabIndex={-1}>
147            {t('generic.cancel')}
148          </Button>
149          <Button
150            variant="contained"
151            type="submit"
152            disabled={!canCreate}
153            aria-disabled={!canCreate}
154            id="NewCarSubmit"
155          >
156            {t('generic.create')}
157          </Button>
158        </DialogActions>
159      </form>
160    </Dialog>
161  );
162};
163
164const useStyles = makeStyles(theme => ({
165  textField: {marginBottom: theme.spacing(2)},
166}));
167
168export default NewCarDialog;