1import {useRef, useEffect} from 'react';
  2import Slider from 'react-slick';
  3import Container from '@material-ui/core/Container';
  4import {makeStyles} from '@material-ui/core/styles';
  5import WaitingList from '../WaitingList';
  6import Car from '../Car';
  7import AddCar from './AddCar';
  8import useEventStore from '../../stores/useEventStore';
  9
 10const CarColumns = ({...props}) => {
 11  const wrapper = useRef();
 12  const slider = useRef();
 13  const classes = useStyles();
 14  const event = useEventStore(s => s.event);
 15  const {cars} = event || {};
 16
 17  useEffect(() => {
 18    if (wrapper.current)
 19      wrapper.current.addEventListener('wheel', e => {
 20        e.preventDefault();
 21        if (e.deltaY < 0) slider.current.slickPrev();
 22        else slider.current.slickNext();
 23      });
 24  }, [wrapper, slider]);
 25
 26  return (
 27    <div ref={wrapper}>
 28      <Slider className={classes.slider} ref={slider} {...SETTINGS}>
 29        <Container maxWidth="sm" className={classes.slide}>
 30          <WaitingList />
 31        </Container>
 32        {cars?.length > 0 &&
 33          cars
 34            .slice()
 35            .sort(sortCars)
 36            .map(car => (
 37              <Container key={car.id} maxWidth="sm" className={classes.slide}>
 38                <Car car={car} {...props} />
 39              </Container>
 40            ))}
 41        <Container maxWidth="sm" className={classes.slide}>
 42          <AddCar {...props} />
 43        </Container>
 44      </Slider>
 45    </div>
 46  );
 47};
 48
 49const sortCars = (a, b) => {
 50  if (!b) return 1;
 51  const dateA = new Date(a.departure).getTime();
 52  const dateB = new Date(b.departure).getTime();
 53  if (dateA === dateB) return new Date(a.createdAt) - new Date(b.createdAt);
 54  else return dateA - dateB;
 55};
 56
 57const SETTINGS = {
 58  dots: false,
 59  infinite: false,
 60  speed: 500,
 61  slidesToShow: 5,
 62  slidesToScroll: 1,
 63  arrows: false,
 64  lazyLoad: true,
 65  swipeToSlide: true,
 66  swipe: true,
 67  responsive: [
 68    {
 69      breakpoint: 600,
 70      settings: {
 71        slidesToShow: 1,
 72        initialSlide: 1,
 73      },
 74    },
 75    {
 76      breakpoint: 900,
 77      settings: {
 78        slidesToShow: 2,
 79      },
 80    },
 81    {
 82      breakpoint: 1200,
 83      settings: {
 84        slidesToShow: 3,
 85      },
 86    },
 87    {
 88      breakpoint: 1400,
 89      settings: {
 90        slidesToShow: 4,
 91      },
 92    },
 93  ],
 94};
 95
 96const useStyles = makeStyles(theme => ({
 97  slider: {
 98    marginTop: theme.mixins.toolbar.minHeight,
 99    padding: theme.spacing(1),
100    overflow: 'hidden',
101    '& .slick-list': {
102      overflow: 'visible',
103    },
104  },
105  slide: {
106    minHeight: `calc(100vh - ${
107      theme.mixins.toolbar.minHeight + theme.spacing(14)
108    }px)`,
109    outline: 'none',
110    padding: theme.spacing(1),
111    marginBottom: theme.spacing(12),
112  },
113}));
114
115export default CarColumns;