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
 57    addPassengerToWaitingList({
 58      passenger,
 59      event,
 60      onError: () => addToast(t('passenger.errors.cant_add_passenger')),
 61      onSucceed: () => {
 62        addToEvent(event.id);
 63        addToast(
 64          t(
 65            addSelf
 66              ? 'passenger.success.added_self_to_waitlist'
 67              : 'passenger.success.added_to_waitlist',
 68            {name}
 69          )
 70        );
 71        toggle();
 72      },
 73    });
 74  };
 75
 76  return (
 77    <Dialog
 78      fullWidth
 79      maxWidth="xs"
 80      open={open}
 81      onClose={toggle}
 82      TransitionComponent={Transition}
 83    >
 84      <form onSubmit={addPassenger}>
 85        <DialogTitle className={classes.title}>
 86          {t('travel.passengers.register_to_waiting_list')}
 87          <Icon
 88            className={classes.closeIcon}
 89            onClick={toggle}
 90            aria-label="close"
 91          >
 92            close
 93          </Icon>
 94        </DialogTitle>
 95        <DialogContent className={classes.dialogContent}>
 96          {!addSelf && (
 97            <AddPassengerCommonFields
 98              email={email}
 99              setEmail={setEmail}
100              name={name}
101              setName={setName}
102            />
103          )}
104          <Box className={classes.inputBox}>
105            <label htmlFor="location">
106              <Typography className={classes.label}>
107                <Icon className={classes.labelIcon}>place</Icon>{' '}
108                {t('travel.passengers.location')}
109              </Typography>
110            </label>
111            <TextField
112              id="Passengerlocation"
113              name="location"
114              value={location}
115              onChange={e => setlocation(e.target.value)}
116              variant="outlined"
117              size="small"
118              fullWidth
119              label=""
120              placeholder={t('travel.passengers.location_placeholder')}
121            />
122            <Typography variant="caption">
123              {t('travel.passengers.location_helper')}
124            </Typography>
125          </Box>
126          <SubmitButton
127            disabled={!addSelf && !canAddPassenger}
128            important={addSelf}
129          >
130            {!addSelf && t('travel.passengers.add_someone')}
131            {addSelf && t('travel.passengers.add_me')}
132          </SubmitButton>
133        </DialogContent>
134      </form>
135    </Dialog>
136  );
137};
138
139export default NewPassengerDialog;