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