1import Typography from '@material-ui/core/Typography';
 2import ListItem from '@material-ui/core/ListItem';
 3import Box from '@material-ui/core/Box';
 4import Button from '@material-ui/core/Button';
 5import {makeStyles} from '@material-ui/core/styles';
 6import {useTranslation} from 'react-i18next';
 7import {
 8  Vehicle,
 9  FindUserVehiclesDocument,
10  useDeleteVehicleMutation,
11} from '../../generated/graphql';
12import useProfile from '../../hooks/useProfile';
13
14interface Props {
15  vehicle: Vehicle & {id: string};
16  select: () => void;
17}
18
19const VehicleItem = ({vehicle, select}: Props) => {
20  const {t} = useTranslation();
21  const classes = useStyles();
22  const {userId} = useProfile();
23  const [deleteVehicleMutation] = useDeleteVehicleMutation({
24    variables: {id: vehicle.id},
25    refetchQueries: [{query: FindUserVehiclesDocument, variables: {userId}}],
26  });
27
28  return (
29    <ListItem className={classes.item}>
30      <Box>
31        <Typography variant="overline" className={classes.label}>
32          {t('travel.vehicle.name')}
33        </Typography>
34        <Button
35          color="primary"
36          variant="text"
37          size="small"
38          onClick={() => deleteVehicleMutation()}
39        >
40          {t('generic.delete')}
41        </Button>
42      </Box>
43      <Typography variant="body1" className={classes.section}>
44        {vehicle.name}
45      </Typography>
46      <Typography variant="overline" className={classes.label}>
47        {t('travel.vehicle.seats_number')}
48      </Typography>
49      <Typography variant="body1" className={classes.section}>
50        {vehicle.seats}
51      </Typography>
52      <Button
53        className={classes.select}
54        fullWidth
55        color="primary"
56        variant="contained"
57        onClick={select}
58      >
59        {t('generic.select')}
60      </Button>
61    </ListItem>
62  );
63};
64
65const useStyles = makeStyles(theme => ({
66  item: {
67    display: 'block',
68    padding: theme.spacing(2, 3),
69  },
70  section: {
71    maxWidth: '75%',
72    marginBottom: theme.spacing(1),
73  },
74  label: {
75    fontWeight: 'bold',
76    opacity: 0.6,
77    marginRight: theme.spacing(2),
78  },
79  select: {
80    display: 'block',
81    maxWidth: '300px',
82    margin: `0 auto ${theme.spacing(1.5)}px auto`,
83  },
84}));
85
86export default VehicleItem;