1import {makeStyles} from '@material-ui/core/styles';
  2import Container from '@material-ui/core/Container';
  3import Slider from 'react-slick';
  4import WaitingList from '../WaitingList';
  5import useEventStore from '../../stores/useEventStore';
  6import {Car as CarType} from '../../generated/graphql';
  7import Car from '../Car';
  8import AddCar from './AddCar';
  9import sliderSettings from './_SliderSettings';
 10
 11interface Props {
 12  toggleNewCar: () => void;
 13}
 14
 15const CarColumns = (props: Props) => {
 16  const event = useEventStore(s => s.event);
 17  const {cars} = event || {};
 18  const classes = useStyles();
 19
 20  return (
 21    <div className={classes.container}>
 22      <div className={classes.dots} id="slider-dots" />
 23      <div className={classes.slider}>
 24        <Slider {...sliderSettings}>
 25          <Container maxWidth="sm" className={classes.slide}>
 26            <WaitingList />
 27          </Container>
 28          {cars
 29            ?.slice()
 30            .sort(sortCars)
 31            .map(car => (
 32              <Container key={car.id} maxWidth="sm" className={classes.slide}>
 33                <Car car={car} {...props} />
 34              </Container>
 35            ))}
 36          <Container maxWidth="sm" className={classes.slide}>
 37            <AddCar {...props} />
 38          </Container>
 39        </Slider>
 40      </div>
 41    </div>
 42  );
 43};
 44
 45const sortCars = (a: CarType, b: CarType) => {
 46  if (!b) return 1;
 47  const dateA = new Date(a.departure).getTime();
 48  const dateB = new Date(b.departure).getTime();
 49  if (dateA === dateB)
 50    return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
 51  else return dateA - dateB;
 52};
 53
 54const useStyles = makeStyles(theme => ({
 55  container: {
 56    minHeight: '100vh',
 57    paddingTop: theme.mixins.toolbar.minHeight,
 58    paddingLeft: theme.spacing(6),
 59    paddingRight: theme.spacing(6),
 60    [theme.breakpoints.down('sm')]: {
 61      paddingLeft: theme.spacing(),
 62      paddingRight: theme.spacing(),
 63    },
 64    display: 'flex',
 65    flexDirection: 'column',
 66    overflowX: 'hidden',
 67    overflowY: 'auto',
 68  },
 69  dots: {
 70    height: 32,
 71    overflow: 'auto',
 72    '& overflow': '-moz-scrollbars-none',
 73    '-ms-overflow-style': 'none',
 74    '&::-webkit-scrollbar': {
 75      height: '0 !important',
 76    },
 77    '& .slick-dots': {
 78      position: 'static',
 79      '& li': {
 80        display: 'block',
 81      },
 82    },
 83    '& .slick-dots li:first-child button:before, & .slick-dots li:last-child button:before':
 84      {
 85        color: theme.palette.primary.main,
 86      },
 87  },
 88  slider: {
 89    flexGrow: 1,
 90    height: 1,
 91    '& .slick-slider': {
 92      height: '100%',
 93      '& .slick-list': {
 94        overflow: 'visible',
 95      },
 96      cursor: 'grab',
 97    },
 98  },
 99  slide: {
100    padding: theme.spacing(1),
101    marginBottom: theme.spacing(12),
102    outline: 'none',
103    '& > *': {
104      cursor: 'default',
105    },
106  },
107}));
108
109export default CarColumns;