import {useEffect, useRef} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Slider from 'react-slick';
import {Car as CarType} from '../../generated/graphql';
import useEventStore from '../../stores/useEventStore';
import useTourStore from '../../stores/useTourStore';
import WaitingList from '../WaitingList';
import Car from '../Car';
import AddCar from './AddCar';
import sliderSettings from './_SliderSettings';
interface Props {
toggleNewCar: () => void;
}
const CarColumns = (props: Props) => {
const event = useEventStore(s => s.event);
const {cars} = event || {};
const slider = useRef(null);
const isCreator = useTourStore(s => s.isCreator);
const step = useTourStore(s => s.step);
const prev = useTourStore(s => s.prev);
const classes = useStyles();
// On tour step changes : component update
useEffect(() => {
tourStep(prev, step, isCreator, slider.current);
}, [step]);
return (
{cars
?.slice()
.sort(sortCars)
.map(car => (
))}
);
};
const tourStep = (prev, step, isCreator, slider) => {
const fromTo = (step1, step2) => prev === step1 && step === step2;
const first = () => slider?.slickGoTo(0, true);
const last = () =>
slider?.slickGoTo(slider?.innerSlider.state.slideCount, true);
if (isCreator) {
if (fromTo(2, 3) || fromTo(4, 3)) first();
else if (fromTo(3, 4)) last();
} else {
if (fromTo(1, 2)) first();
else if (fromTo(0, 1) || fromTo(2, 1)) last();
}
};
const sortCars = (a: CarType, b: CarType) => {
if (!b) return 1;
const dateA = new Date(a.departure).getTime();
const dateB = new Date(b.departure).getTime();
if (dateA === dateB)
return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
else return dateA - dateB;
};
const useStyles = makeStyles(theme => ({
container: {
minHeight: '100vh',
paddingTop: theme.mixins.toolbar.minHeight,
paddingLeft: theme.spacing(6),
paddingRight: theme.spacing(6),
[theme.breakpoints.down('sm')]: {
paddingLeft: theme.spacing(),
paddingRight: theme.spacing(),
},
display: 'flex',
flexDirection: 'column',
overflowX: 'hidden',
overflowY: 'auto',
},
dots: {
height: 32,
overflow: 'auto',
'& overflow': '-moz-scrollbars-none',
'-ms-overflow-style': 'none',
'&::-webkit-scrollbar': {
height: '0 !important',
},
'& .slick-dots': {
position: 'static',
'& li': {
display: 'block',
},
},
'& .slick-dots li:first-child button:before, & .slick-dots li:last-child button:before':
{
color: theme.palette.primary.main,
},
},
slider: {
flexGrow: 1,
height: 1,
'& .slick-slider': {
height: '100%',
'& .slick-list': {
overflow: 'visible',
},
cursor: 'grab',
},
},
slide: {
padding: theme.spacing(1),
marginBottom: theme.spacing(12),
outline: 'none',
'& > *': {
cursor: 'default',
},
},
}));
export default CarColumns;