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 {useStrapi} from 'strapi-react-context';
 6import {useEvent} from '../../contexts/Event';
 7import WaitingList from '../WaitingList';
 8import Car from '../Car';
 9import AddCar from './AddCar';
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    <Slider {...settings}>
73      <Container maxWidth="sm" className={classes.slide}>
74        <WaitingList />
75      </Container>
76      {cars &&
77        cars.map(car => (
78          <Container key={car.id} maxWidth="sm" className={classes.slide}>
79            <Car car={car} {...props} />
80          </Container>
81        ))}
82      <Container maxWidth="sm" className={classes.slide}>
83        <AddCar {...props} />
84      </Container>
85    </Slider>
86  );
87};
88
89const useStyles = makeStyles(theme => ({
90  slide: {
91    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
92    outline: 'none',
93    padding: theme.spacing(2),
94  },
95}));
96
97export default CarColumns;