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