import {useState, forwardRef, useMemo, useEffect} from 'react';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/Button';
import Slide from '@mui/material/Slide';
import TextField from '@mui/material/TextField';
import Slider from '@mui/material/Slider';
import Typography from '@mui/material/Typography';
import {Box, Divider} from '@mui/material';
import {useTheme} from '@mui/material/styles';
import {DatePicker} from '@mui/x-date-pickers/DatePicker';
import {TimePicker} from '@mui/x-date-pickers/TimePicker';
import moment, {Moment} from 'moment';
import {useTranslation} from 'react-i18next';
import useEventStore from '../../stores/useEventStore';
import useActions from './useActions';
import FAQLink from './FAQLink';
import {Vehicle} from '../../generated/graphql';
interface Props {
context: {
vehicle: Vehicle;
opened: boolean;
};
toggle: ({opened: boolean}) => void;
}
const NewTravelDialog = ({context, toggle}: Props) => {
const {t} = useTranslation();
const theme = useTheme();
const event = useEventStore(s => s.event);
const {createTravel} = useActions({event});
const dateMoment = useMemo(
() => (event?.date ? moment(event.date) : null),
[event?.date]
);
// States
const [name, setName] = useState('');
const [seats, setSeats] = useState(4);
const [meeting, setMeeting] = useState('');
const [date, setDate] = useState(dateMoment);
const [time, setTime] = useState(dateMoment);
const [phone, setPhone] = useState('');
const [details, setDetails] = useState('');
const canCreate = !!name && !!seats;
const clearState = () => {
setName('');
setSeats(4);
setMeeting('');
setDate(moment());
setPhone('');
setDetails('');
};
useEffect(() => {
if (context.vehicle) {
setName(context.vehicle.name);
setSeats(context.vehicle.seats);
setPhone(context.vehicle.phone_number);
}
}, [context.vehicle]);
const onCreate = async e => {
if (e.preventDefault) e.preventDefault();
const travel = {
meeting,
details,
seats,
vehicleName: name,
phone_number: phone,
departure: formatDate(date, time),
event: event.id,
};
const createVehicle = !context.vehicle;
await createTravel(travel, createVehicle);
toggle({opened: false});
clearState();
};
const halfWidthFieldSx = {
margin: `0 ${theme.spacing(1.5)}`,
width: `calc(50% - ${theme.spacing(3)})`,
'& > .MuiFormLabel-root': {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: '100%',
overflow: 'hidden',
},
};
return (
);
};
const Transition = forwardRef(function Transition(props, ref) {
return ;
});
const formatDate = (date: Moment, time: Moment) => {
return moment(
`${moment(date).format('YYYY-MM-DD')} ${moment(time).format('HH:mm')}`,
'YYYY-MM-DD HH:mm'
).toISOString();
};
const MARKS = [1, 2, 3, 4, 5, 6, 7, 8].map(value => ({
value,
label: value,
}));
const addSpacing = (theme, ratio) => ({
margin: `0 ${theme.spacing(3 * ratio)}`,
width: `calc(100% - ${theme.spacing(6 * ratio)})`,
});
export default NewTravelDialog;