1import {useState} from 'react';
 2import Box from '@material-ui/core/Box';
 3import TextField from '@material-ui/core/TextField';
 4import IconButton from '@material-ui/core/IconButton';
 5import Divider from '@material-ui/core/Divider';
 6import Icon from '@material-ui/core/Icon';
 7import {useTranslation} from 'react-i18next';
 8import {EditComponentPassengerPassengerInput as PassengerInput} from '../../generated/graphql';
 9import {makeStyles} from '@material-ui/core';
10import {isValidEmail} from '../../lib/formValidation';
11
12interface Props {
13  addPassenger: (passenger: PassengerInput) => void;
14  id: number;
15}
16
17const Input = (props: Props) => {
18  const {addPassenger, id} = props;
19  const [name, setName] = useState('');
20  const [email, setEmail] = useState('');
21  const [error, setError] = useState<string>();
22  const classes = useStyles({showEmail: !!name});
23  const {t} = useTranslation();
24
25  const onSave = () => {
26    if (email && !isValidEmail(email)) setError('email');
27    else if (name) {
28      addPassenger({name, email});
29      setName('');
30      setEmail('');
31      setError(null);
32    }
33  };
34
35  const onKeyDown = e => {
36    if (e.keyCode === 13) onSave();
37  };
38
39  return (
40    <Box pb={1}>
41      <Box display="flex" flexDirection="row" alignItems="center" px={2}>
42        <TextField
43          value={name}
44          onChange={e => setName(e.target.value)}
45          onKeyDown={onKeyDown}
46          fullWidth
47          label={t('car.passengers.add')}
48          id={`NewPassenger-${id}-name`}
49          name={`passenger-${id}-name`}
50        />
51        <IconButton
52          color="primary"
53          edge="end"
54          size="small"
55          disabled={!name}
56          onClick={onSave}
57        >
58          <Icon>check</Icon>
59        </IconButton>
60      </Box>
61      <Box pl={2} pt={1} pr={5} mb={2} className={classes.emailBox}>
62        <TextField
63          value={email}
64          onChange={e => setEmail(e.target.value)}
65          onKeyDown={onKeyDown}
66          fullWidth
67          label={t`car.passengers.email`}
68          id={`NewPassenger-${id}-email`}
69          name={`passenger-${id}-email`}
70          helperText={t`car.passengers.emailHelper`}
71          error={error === 'email'}
72        />
73      </Box>
74      <Divider />
75    </Box>
76  );
77};
78
79const useStyles = makeStyles(theme => ({
80  emailBox: {
81    transition: 'all 0.3s ease',
82    maxHeight: ({showEmail}) => (showEmail ? '5rem' : 0),
83    overflow: 'hidden',
84  },
85}));
86
87export default Input;