import { Grid } from '@mui/material';
import {
  BigCarouselWrapper,
  BigImgCarousel,
  BigItemCarouselWrapper,
  BigSlideButtonLeft,
  BigSlideButtonRight,
  BigVideoCarousel
} from './styles';
import { BigCarouselProps, NEXT, PREV } from './types';
import { ASSETS_URL } from '../../consts/common';
import type { Direction } from './SmallCarousel';
const BigCarousel = ({
  handleBigCarousel,
  items,
  index,
  open,
  isSmall,
  fallBackImg,
  leftClickEvent,
  rightClickEvent,
  vidoStartEvent
}: BigCarouselProps) => {
  const eventHandler =
    (event: () => void, dir?: Direction, action?: (dir: Direction) => void) => () => {
      event();
      if (action && dir) action(dir);
    };

  return (
    <BigCarouselWrapper
      isSmall={isSmall}
      show={open}
      container
      justifyContent="center"
      alignItems="center"
    >
      <Grid item>
        {items && (
          <BigSlideButtonLeft
            customSize={64}
            src={`${ASSETS_URL}/icons2/icon_bigArrow.svg`}
            onClick={eventHandler(leftClickEvent, PREV, handleBigCarousel)}
          />
        )}
      </Grid>
      <Grid item>
        <BigItemCarouselWrapper>
          {!items ? (
            <BigImgCarousel isSmall={isSmall} key={index} img={fallBackImg} />
          ) : items[index].videoUrl ? (
            <BigVideoCarousel
              id="video"
              onLoad={() => {
                vidoStartEvent();
              }}
              isSmall={isSmall}
              src={`${items[index].videoUrl}?autoplay=1`}
              title="YouTube video player"
              allow="autoplay"
              allowFullScreen={true}
              frameBorder="0"
            />
          ) : (
            <BigImgCarousel isSmall={isSmall} key={index} img={items[index].imgUrl} />
          )}
        </BigItemCarouselWrapper>
      </Grid>
      {items && (
        <Grid item>
          <BigSlideButtonRight
            customSize={64}
            src={`${ASSETS_URL}/icons2/icon_bigArrow.svg`}
            onClick={() => {
              rightClickEvent();
              handleBigCarousel(NEXT);
            }}
          />
        </Grid>
      )}
    </BigCarouselWrapper>
  );
};

export default BigCarousel;