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