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 className={classes.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  slider: {
 91    padding: theme.spacing(1),
 92  },
 93  slide: {
 94    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px - ${theme.spacing(
 95      2
 96    )})`,
 97    outline: 'none',
 98    padding: theme.spacing(2),
 99    marginBottom: theme.spacing(10),
100  },
101}));
102
103export default CarColumns;