import { styled } from '@mui/material/styles';
import { Grid } from '@mui/material';
import type { Theme } from '../@styles/theme-provider';
import { CustomIcon } from '../custom-icon';
import type {
  BigCarouselWrapperProps,
  CarouselContainerProps,
  CarouselSlotProps,
  IframeProps,
  Img,
  SmallCarouselWrapperProps
} from './types';
import { PREV } from './types';

/** All width/height values hard-coded here are intended to be used
 * by the Platform in accordance with the most common screen widths
 * of our customers. CarouselContainer's `width` is the width of the
 * user's screen, and the `transform` value centers the position. */

export const BigImgCarousel = styled('div', {
  shouldForwardProp: prop => prop !== 'isSmall' && prop !== 'img'
})(({ img, isSmall, theme }: Img & { theme: Theme }) => ({
  backgroundImage: `url(${img})`,
  backgroundSize: 'cover',
  width: !isSmall ? '1376px' : '1095px',
  height: !isSmall ? '780px' : '620px',
  borderRadius: theme.spacing(0.5),
  margin: '0 auto',
  cursor: 'pointer'
}));

export const BigVideoCarousel = styled('iframe', {
  shouldForwardProp: prop => prop !== 'isSmall'
})(({ isSmall, theme }: IframeProps & { theme: Theme }) => ({
  width: !isSmall ? '1376px' : '1095px',
  height: !isSmall ? '780px' : '620px',
  borderRadius: theme.spacing(0.5),
  margin: '0 auto',
  cursor: 'pointer'
}));

export const SmallItemCarousel = styled('div', {
  shouldForwardProp: prop => prop !== 'isSmall' && prop !== 'img'
})(({ img, isSmall, theme }: Img & { theme: Theme }) => ({
  textAlign: 'center',
  backgroundImage: `url(${img})`,
  backgroundSize: 'cover',
  width: !isSmall ? '800px' : '548px',
  height: !isSmall ? '453px' : '316px',
  borderRadius: theme.spacing(0.5),
  transition: 'transform .5s',
  border: `1px solid ${theme.palette.secondary[200]}`,
  cursor: 'pointer',
  '&:hover': {
    transform: 'scale(1.01)'
  }
}));

export const ErrorItemCarousel = styled('div', {
  shouldForwardProp: prop => prop !== 'isSmall' && prop !== 'img'
})(({ img, isSmall, theme }: Img & { theme: Theme }) => ({
  textAlign: 'center',
  backgroundImage: `url(${img})`,
  backgroundSize: 'cover',
  width: !isSmall ? '800px' : '548px',
  height: !isSmall ? '453px' : '316px',
  borderRadius: theme.spacing(0.5),
  margin: '0 auto',
  cursor: 'pointer'
}));

export const CarouselContainer = styled('div', {
  shouldForwardProp: prop => prop !== 'dir' && prop !== 'isSmall' && prop !== 'sliding'
})(({ sliding, dir, isSmall, width }: CarouselContainerProps) => {
  let transform;
  if (isSmall) {
    switch (true) {
      case width < 1680 && width > 1440:
        transform = '-51.5%';
        break;
      case width < 1440 && width >= 1366:
        transform = '-60%';
        break;
      case width < 1366 && width >= 1280:
        transform = '-65.5%';
        break;
      default:
        break;
    }
  } else if (width === 1440) {
    transform = '-78%';
  } else if (width === 1512) {
    transform = '-73%';
  }
  return {
    cursor: 'pointer',
    display: 'flex',
    transition: sliding ? 'none' : 'transform 1s ease',
    transform: !sliding
      ? `translateX(calc(${
          !isSmall && width !== 1440 && width !== 1512 ? '-63.5%' : transform
        } - 20px))`
      : dir === PREV
      ? `translateX(calc(2 * (${!isSmall ? '-61.5%' : transform} - 20px)))`
      : 'translateX(0%)'
  };
});

export const SmaellCarouselWrapper = styled(Grid, {
  shouldForwardProp: prop => prop !== 'isSmall'
})(({ isSmall, theme }: SmallCarouselWrapperProps & { theme: Theme }) => ({
  width: !isSmall ? '1320px' : '1095px',
  overflow: 'hidden',
  marginLeft: theme.spacing(1.5),
  marginRight: theme.spacing(1.5)
}));

export const BigCarouselWrapper = styled(Grid, {
  shouldForwardProp: prop => prop !== 'show' && prop !== 'isSmall'
})(({ show, isSmall }: BigCarouselWrapperProps) => ({
  width: !isSmall ? '1376px' : '1095px',
  height: !isSmall ? '780px' : '620px',
  display: show ? 'flex' : 'none',
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  zIndex: 1202,
  flexWrap: 'nowrap'
}));

export const CarouselSlot = styled('div', {
  shouldForwardProp: prop => prop !== 'order' && prop !== 'isSmall'
})(({ order, isSmall, theme }: CarouselSlotProps & { theme: Theme }) => ({
  width: !isSmall ? '800px' : '548px',
  flexBasis: 'auto',
  marginRight: theme.spacing(5),
  order: order,
  backgroundColor: 'inherit',
  cursor: 'pointer'
}));

export const SlideButtonLeft = styled(CustomIcon)(({ theme }: { theme: Theme }) => ({
  width: theme.spacing(2),
  color: theme.palette.primary[400],
  transition: 'transform .5s',
  cursor: 'pointer',
  '&:hover': {
    transform: 'scale(1.3)'
  }
}));

export const SlideButtonRight = styled(CustomIcon)(({ theme }: { theme: Theme }) => ({
  transform: 'rotate(180deg)',
  width: theme.spacing(2),
  color: theme.palette.primary[400],
  transition: 'transform .5s',
  cursor: 'pointer',
  '&:hover': {
    transform: 'scale(1.3) rotate(180deg)'
  }
}));

export const BigSlideButtonLeft = styled(CustomIcon)(({ theme }: { theme: Theme }) => ({
  width: theme.spacing(2),
  color: theme.palette.common.white,
  transition: 'transform .5s',
  cursor: 'pointer',
  '&:hover': {
    transform: 'scale(1.2)'
  }
}));

export const BigSlideButtonRight = styled(CustomIcon)(({ theme }: { theme: Theme }) => ({
  transform: 'rotate(180deg)',
  width: theme.spacing(2),
  color: theme.palette.common.white,
  transition: 'transform .5s',
  cursor: 'pointer',
  '&:hover': {
    transform: 'scale(1.2) rotate(180deg)'
  }
}));
export const ExitIcon = styled(CustomIcon)(({ theme }: { theme: Theme }) => ({
  position: 'absolute',
  top: theme.spacing(3.5),
  right: theme.spacing(3.5),
  color: theme.palette.common.white,
  transition: 'transform .5s',
  cursor: 'pointer',
  '&:hover': {
    transform: 'scale(1.2)'
  }
}));

export const BigItemCarouselWrapper = styled('div')(({ theme }: { theme: Theme }) => ({
  margin: `0 ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`
}));