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