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