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