1import {FormEvent, useState} from 'react';
  2import Dialog from '@material-ui/core/Dialog';
  3import DialogContent from '@material-ui/core/DialogContent';
  4import DialogTitle from '@material-ui/core/DialogTitle';
  5import TextField from '@material-ui/core/TextField';
  6import Box from '@material-ui/core/Box';
  7import Typography from '@material-ui/core/Typography';
  8import Icon from '@material-ui/core/Icon';
  9import {useTranslation} from 'react-i18next';
 10import useToastStore from '../../stores/useToastStore';
 11import useEventStore from '../../stores/useEventStore';
 12import useAddToEvents from '../../hooks/useAddToEvents';
 13import usepassengersActions from '../../hooks/usePassengersActions';
 14import useProfile from '../../hooks/useProfile';
 15import SubmitButton from './SubmitButton';
 16import Transition from './Transition';
 17import AddPassengerCommonFields from './AddPassengerCommonFields';
 18import useStyles from './useStyles';
 19
 20interface Props {
 21  toggle: () => void;
 22  open: boolean;
 23  addSelf: boolean;
 24}
 25
 26const NewPassengerDialog = ({open, toggle, addSelf}: Props) => {
 27  const {t} = useTranslation();
 28  const classes = useStyles();
 29  const event = useEventStore(s => s.event);
 30  const addToast = useToastStore(s => s.addToast);
 31  const {addToEvent} = useAddToEvents();
 32
 33  // States
 34  const [name, setName] = useState('');
 35  const [email, setEmail] = useState('');
 36  const [location, setlocation] = useState('');
 37  const canAddPassenger = !!name && !!email;
 38  const {user} = useProfile();
 39  const {addPassengerToWaitingList} = usepassengersActions();
 40
 41  const addPassenger = async (e: FormEvent) => {
 42    e.preventDefault();
 43    const passenger =
 44      addSelf && user
 45        ? {
 46            user: user,
 47            email: user.email,
 48            name: user.username,
 49            location,
 50          }
 51        : {
 52            email,
 53            name,
 54            location,
 55          };
 56    try {
 57      await addPassengerToWaitingList({
 58        passenger,
 59        event,
 60      });
 61      addToEvent(event.id);
 62      addToast(
 63        t(
 64          addSelf
 65            ? 'passenger.success.added_self_to_waitlist'
 66            : 'passenger.success.added_to_waitlist',
 67          {name}
 68        )
 69      );
 70      toggle();
 71    } catch (error) {
 72      console.error(error);
 73      addToast(t('passenger.errors.cant_add_passenger'));
 74    }
 75  };
 76
 77  return (
 78    <Dialog
 79      fullWidth
 80      maxWidth="xs"
 81      open={open}
 82      onClose={toggle}
 83      TransitionComponent={Transition}
 84    >
 85      <form onSubmit={addPassenger}>
 86        <DialogTitle className={classes.title}>
 87          {t('travel.passengers.register_to_waiting_list')}
 88          <Icon
 89            className={classes.closeIcon}
 90            onClick={toggle}
 91            aria-label="close"
 92          >
 93            close
 94          </Icon>
 95        </DialogTitle>
 96        <DialogContent className={classes.dialogContent}>
 97          {!addSelf && (
 98            <AddPassengerCommonFields
 99              email={email}
100              setEmail={setEmail}
101              name={name}
102              setName={setName}
103            />
104          )}
105          <Box className={classes.inputBox}>
106            <label htmlFor="location">
107              <Typography className={classes.label}>
108                <Icon className={classes.labelIcon}>place</Icon>{' '}
109                {t('travel.passengers.location')}
110              </Typography>
111            </label>
112            <TextField
113              id="Passengerlocation"
114              name="location"
115              value={location}
116              onChange={e => setlocation(e.target.value)}
117              variant="outlined"
118              size="small"
119              fullWidth
120              label=""
121              placeholder={t('travel.passengers.location_placeholder')}
122            />
123            <Typography variant="caption">
124              {t('travel.passengers.location_helper')}
125            </Typography>
126          </Box>
127          <SubmitButton
128            disabled={!addSelf && !canAddPassenger}
129            important={addSelf}
130          >
131            {!addSelf && t('travel.passengers.add_someone')}
132            {addSelf && t('travel.passengers.add_me')}
133          </SubmitButton>
134        </DialogContent>
135      </form>
136    </Dialog>
137  );
138};
139
140export default NewPassengerDialog;