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 () => {
 47    try {
 48      await strapi.services.cars.create({
 49        name,
 50        seats,
 51        meeting,
 52        departure: date.toISOString(),
 53        phone_number: phone,
 54        details,
 55        event: event.id,
 56      });
 57      addToast(t("car.creation.created"));
 58      toggle();
 59      return true;
 60    } catch (error) {
 61      console.error(error);
 62      addToast(t("car.errors.cant_create"));
 63      return false;
 64    }
 65  };
 66
 67  return (
 68    <Dialog
 69      open={open}
 70      TransitionComponent={Transition}
 71      onClose={toggle}
 72      fullWidth
 73      maxWidth="sm"
 74    >
 75      <DialogTitle>{t("car.creation.title")}</DialogTitle>
 76      <DialogContent>
 77        <DialogContentText>
 78          <TextField
 79            className={classes.textField}
 80            label={t("car.creation.name")}
 81            fullWidth
 82            autoFocus
 83            margin="dense"
 84            value={name}
 85            onChange={(e) => setName(e.target.value)}
 86            id="NewCarName"
 87            name="name"
 88          />
 89          <Typography variant="caption">{t("car.creation.seats")}</Typography>
 90          <Slider
 91            value={seats}
 92            onChange={(e, value) => setSeats(value)}
 93            step={1}
 94            marks={marks}
 95            min={1}
 96            max={marks.length}
 97            valueLabelDisplay="auto"
 98          />
 99          <TextField
100            className={classes.textField}
101            label={t("car.creation.meeting")}
102            fullWidth
103            margin="dense"
104            multiline
105            rows={2}
106            value={meeting}
107            onChange={(e) => setMeeting(e.target.value)}
108            id="NewCarMeeting"
109            name="meeting"
110          />
111          <DateTimePicker
112            label={t("event.creation.date")}
113            value={date}
114            onChange={setDate}
115            className={classes.textField}
116            fullWidth
117            format="LLLL"
118            disablePast
119            id="NewCarDateTime"
120            name="date"
121          />
122          <TextField
123            className={classes.textField}
124            label={t("car.creation.phone")}
125            fullWidth
126            autoFocus
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 onClick={toggle}>{t("generic.cancel")}</Button>
149        <Button variant="contained" onClick={onCreate} disabled={!canCreate}>
150          {t("generic.create")}
151        </Button>
152      </DialogActions>
153    </Dialog>
154  );
155};
156
157const useStyles = makeStyles((theme) => ({
158  textField: { marginBottom: theme.spacing(2) },
159}));
160
161export default NewCarDialog;