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 {user} = useProfile();
23  const [deleteVehicleMutation] = useDeleteVehicleMutation({
24    variables: {id: vehicle.id},
25    refetchQueries: [
26      {query: FindUserVehiclesDocument, variables: {userId: user.id}},
27    ],
28  });
29
30  return (
31    <ListItem className={classes.item}>
32      <Box>
33        <Typography variant="overline" className={classes.label}>
34          {t('travel.vehicle.name')}
35        </Typography>
36        <Button
37          color="primary"
38          variant="text"
39          size="small"
40          onClick={() => deleteVehicleMutation()}
41        >
42          {t('generic.delete')}
43        </Button>
44      </Box>
45      <Typography variant="body1" className={classes.section}>
46        {vehicle.name}
47      </Typography>
48      <Typography variant="overline" className={classes.label}>
49        {t('travel.vehicle.seats_number')}
50      </Typography>
51      <Typography variant="body1" className={classes.section}>
52        {vehicle.seats}
53      </Typography>
54      <Button
55        className={classes.select}
56        fullWidth
57        color="primary"
58        variant="contained"
59        onClick={select}
60      >
61        {t('generic.select')}
62      </Button>
63    </ListItem>
64  );
65};
66
67const useStyles = makeStyles(theme => ({
68  item: {
69    display: 'block',
70    padding: theme.spacing(2, 3),
71  },
72  section: {
73    maxWidth: '75%',
74    marginBottom: theme.spacing(1),
75  },
76  label: {
77    fontWeight: 'bold',
78    opacity: 0.6,
79    marginRight: theme.spacing(2),
80  },
81  select: {
82    display: 'block',
83    maxWidth: '300px',
84    margin: `0 auto ${theme.spacing(1.5)}px auto`,
85  },
86}));
87
88export default VehicleItem;