import {useState, forwardRef, useMemo} 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 moment from 'moment';
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 {useTranslation} from 'next-i18next';
import PhoneInput from '../../components/PhoneInput';
import PlaceInput from '../PlaceInput';
import useEventStore from '../../stores/useEventStore';
import useActions from './useActions';
import FAQLink from './FAQLink';
import {VehicleEntity} from '../../generated/graphql';
interface Props {
selectedVehicle: VehicleEntity;
opened: boolean;
toggle: (opts: {opened: boolean}) => void;
}
const NewTravelDialog = ({selectedVehicle, opened, 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(selectedVehicle?.attributes.name || '');
const [seats, setSeats] = useState(selectedVehicle?.attributes.seats || 4);
const [meeting, setMeeting] = useState('');
const [meeting_latitude, setMeetingLatitude] = useState(null);
const [meeting_longitude, setMeetingLongitude] = useState(null);
const [date, setDate] = useState(dateMoment);
const [time, setTime] = useState(dateMoment);
const [phone, setPhone] = useState(
selectedVehicle?.attributes.phone_number || ''
);
const [phoneCountry, setPhoneCountry] = useState(
selectedVehicle?.attributes.phoneCountry || ''
);
const [phoneError, setPhoneError] = useState(false);
const [details, setDetails] = useState('');
const [dateError, setDateError] = useState(false);
const [titleError, setTitleError] = useState(false);
const [isTitleEmpty, setIsTitleEmpty] = useState(true);
const canCreate = !!name && !!seats && !phoneError && phone;
const clearState = () => {
setName('');
setSeats(4);
setMeeting('');
setMeetingLatitude(null);
setMeetingLongitude(null);
setDate(moment());
setPhone('');
setPhoneCountry('');
setDetails('');
};
const onCreate = async e => {
if (e.preventDefault) e.preventDefault();
if (!date) {
setDateError(true);
return;
} else {
setDateError(false);
}
if (!name.trim()) {
setTitleError(true);
return;
} else {
setTitleError(false);
}
const travel = {
meeting,
meeting_latitude,
meeting_longitude,
details,
seats,
vehicleName: name,
phone_number: phone,
phoneCountry: phoneCountry,
departureDate: date ? moment(date).format('YYYY-MM-DD') : '',
departureTime: time ? moment(time).format('HH:mm') : '',
event: event.id,
};
const createVehicle = !selectedVehicle;
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',
},
};
const handleTitleChange = e => {
const inputValue = e.target.value;
setName(inputValue);
setIsTitleEmpty(inputValue.trim() === '');
};
return (
);
};
const Transition = forwardRef(function Transition(props, ref) {
return ;
});
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;