1import {
 2  Button,
 3  Dialog,
 4  DialogActions,
 5  DialogContent,
 6  DialogTitle,
 7  List,
 8  Typography,
 9} from '@mui/material';
10import {useTranslation} from 'next-i18next';
11import useEventStore from '../../stores/useEventStore';
12import AvailableTravel from '../AssignPassenger/AvailableTravel';
13import {TravelEntity} from '../../generated/graphql';
14
15type Props = {
16  open: boolean;
17  onClose: () => void;
18  onAssign: (travel: TravelEntity) => void;
19};
20
21const TravelSelectionModal = (props: Props) => {
22  const {open, onClose, onAssign} = props;
23  const {t} = useTranslation();
24  const travels = useEventStore(s => s.event?.travels?.data || []);
25
26  return (
27    <Dialog open={open} onClose={onClose}>
28      <DialogTitle>{t`passenger.assign.title`}</DialogTitle>
29      <DialogContent sx={{p: 0}}>
30        {!travels?.length && (
31          <Typography px={3}>{t`passenger.assign.no_travel.title`}</Typography>
32        )}
33        <List disablePadding>
34          {travels?.map(travel => (
35            <AvailableTravel
36              key={travel.id}
37              travel={travel}
38              assign={onAssign}
39            />
40          ))}
41        </List>
42      </DialogContent>
43      <DialogActions>
44        <Button onClick={onClose}>{t`generic.cancel`}</Button>
45      </DialogActions>
46    </Dialog>
47  );
48};
49
50export default TravelSelectionModal;