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