import YouTube from 'react-youtube';
import MuiBackdrop from '@mui/material/Backdrop';
import { alpha, styled } from '@mui/material/styles';
import type { Theme } from '../@styles/theme-provider';
import { CustomIcon } from '../custom-icon';

export const StyledBackdrop = styled(MuiBackdrop, {
  name: 'Backdrop'
})(({ theme }: { theme: Theme }) => ({
  zIndex: theme.zIndex.drawer + 1,
  backgroundColor: alpha(theme.palette.common.black, 0.8)
}));

export const StyledPopupWrapper = styled('div', {
  name: 'ModalWrapper'
})(({ theme }: { theme: Theme }) => ({
  margin: theme.spacing(0, 1.5)
}));

export const StyledCloseIcon = styled(CustomIcon, {
  name: 'CloseIcon'
})(({ 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 StyledYouTubePlayer = styled(YouTube, {
  name: 'YouTubePlayer'
})({
  position: 'absolute',
  top: '50%',
  left: '50%',
  flexWrap: 'nowrap',
  lineHeight: 0,
  overflowY: 'hidden',
  transform: 'translate(-50%, -50%)',
  iframe: {
    width: '1096px',
    height: '616px',
    '@media (min-width: 1440px)': {
      width: '1376px',
      height: '774px'
    }
  }
});

export const StyledYouTubePoster = styled('img', {
  name: 'YouTubePoster'
})(({ theme }: { theme: Theme }) => ({
  borderRadius: theme.spacing(0.5),
  cursor: 'pointer'
}));