import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config'

import { CloseButton as CloseButtonBase } from 'features/PopupComponents'

export const ControlsGradient = styled.div<{ isVisible?: boolean }>`
  background-image: url(/images/player-controls-gradient.png);
  bottom: 0;
  position: absolute;
  width: 100%;
  pointer-events: none;
  height: 145px;
`

type HoverStylesProps = {
  visible: boolean,
}

export const hoverStyles = css<HoverStylesProps>`
  transition: opacity 0.3s ease-in-out;
  ${({ visible }) => (visible
    ? css`opacity: 1;`
    : css`opacity: 0;`
  )}
`

export const Controls = styled.div`
  z-index: 50;
  position: absolute;
  width: 100%;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  ${hoverStyles}

  ${isMobileDevice
    ? css`
        bottom: 5px;
        @media (orientation: landscape){
          bottom: 10px;
          width: 100%;
          left: 50%;
          transform: translateX(-50%);
        }
    `
    : ''};
`

export const ControlsRow = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;

  :first-child {
    margin-bottom: 17px;
    padding: 0 18px;
  }

  :last-child {
    padding-left: 28px;
    padding-right: 25px;
  }

  ${isMobileDevice
    ? css`
      justify-content: flex-start;
       :first-child {
         margin-bottom: 5px;
         padding: 0 10px;
       }

       :last-child {
         padding-left: 5px;
         padding-right: 5px;
       }
    `
    : ''};
`

export const ControlsGroup = styled.div`
  display: flex;
  align-items: center;

  ${isMobileDevice
    ? css`
     :last-child {
       margin-left: auto;
       margin-right: 10px;
     }
    `
    : ''};
`

const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9') && isMobileDevice

export const PlayerWrapper = styled.div<PlayStopProps>`

  :not(:root):fullscreen::backdrop {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: white;
    z-index: 0;
  }
  
  width: 100%;
  position: relative;
  background-color: #000;
  min-height: 100%;
  
  ${({ isPlayingEpisode }) => (isPlayingEpisode
    ? css`
        border: 6px solid #5EB2FF;

        video {
          object-fit: ${isMobileDevice ? 'cover' : 'contain'};
        }
    `
    : '')}
  
  :fullscreen {
    padding-top: 0;
  }
  
  ${supportsAspectRatio
    ? css`aspect-ratio: 16 / 9;`
    : css`
        height: 0px;
        padding-top: 56.25%;
      `}

  ${isMobileDevice
    ? css`
        min-height: auto;
        margin-bottom: 15px;
    `
    : ''};
`

type LoaderWrapperProps = {
  buffering?: boolean,
}

export const LoaderWrapper = styled.div<LoaderWrapperProps>`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: ${({ buffering }) => (buffering ? 'block' : 'none')};
`

export const ButtonBase = styled.button`
  outline: none;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 100%;
`

const sizes = {
  lg: 92,
  sm: 24,
}

type PlayStopProps = {
  fullWidth?: boolean,
  isPlayingEpisode?: boolean,
  marginRight?: number,
  playing: boolean,
  size?: keyof typeof sizes,
}

export const PlayStop = styled(ButtonBase)<PlayStopProps>`
  margin-right: ${({ marginRight = 20 }) => `${marginRight}px`};
  background-image: ${({ playing }) => (
    playing
      ? 'url(/images/player-pause.svg)'
      : 'url(/images/player-play.svg)'
  )};
  ${({ size = 'sm' }) => (
    css`
        width: ${sizes[size]}px;
        height: ${sizes[size]}px;
      `
  )};

  ${({ fullWidth }) => (
    fullWidth
      ? css`
        width: 100%;
      `
      : '')};

  ${isMobileDevice
    ? css`
      width: ${sizes.sm}px;
      height: ${sizes.sm}px;
      margin-right: 0;
      padding: 0;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    `
    : ''};
`

export const Volume = styled(ButtonBase)`
  width: 40px;
  height: 26px;
  margin-right: 23px;
  background-image: url(/images/player-volume-off.svg);
`

type FullscreenProps = {
  isFullscreen: boolean,
}

export const Fullscreen = styled(ButtonBase)<FullscreenProps>`
  width: 22px;
  height: 20px;
  background-image: ${({ isFullscreen }) => (
    isFullscreen
      ? 'url(/images/player-fullscreen-off.svg)'
      : 'url(/images/player-fullscreen-on.svg)'
  )};
  ${isMobileDevice
    ? css`
        width: 20px;
        height: 18px;
      `
    : ''};
`

type ButtonProps = {
  isHidden?: boolean,
  size?: 'sm' | 'lg',
}

const rewindButtonSizes = {
  fontSizes: {
    lg: 40,
    sm: 14,
  },
  sides: {
    lg: 75,
    sm: 29,
  },
}

export const Backward = styled(ButtonBase)<ButtonProps>`
  padding: 0;
  margin-right: 10px;
  background-image: url(/images/player-backward.svg);
  background-repeat: no-repeat;
  background-size: contain;
  font-weight: normal;
  ${({ size = 'sm' }) => (
    css`
        min-width: ${rewindButtonSizes.sides[size]}px;
        height: ${rewindButtonSizes.sides[size]}px;
        font-size: ${rewindButtonSizes.fontSizes[size]}px;
      `
  )}
  display: ${({ isHidden }) => (isHidden ? 'none' : 'block')};
  ${isMobileDevice
    ? css`
        width: 15%;
        font-size: 14px;
        margin-right: 20px;
        margin-left: 20px;
      `
    : ''};
`

export const Forward = styled(Backward)`
  background-image: url(/images/player-forward.svg);
`

type PlaybackTimeProps = {
  width?: number,
}

export const PlaybackTime = styled.span<PlaybackTimeProps>`
  width: ${({ width = 150 }) => `${width}px`};
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  margin-right: 10px;

  ${isMobileDevice
    ? css`
        margin-left: 5px;
        font-size: 10px;
        width: 100px;
        white-space: nowrap;
      `
    : ''};
`

type CenterControlsProps = {
  controlsVisible: boolean,
  playing: boolean,
}

export const CenterControls = styled.div<CenterControlsProps>`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 413px;
  height: 109px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: opacity 0.3s ease-in-out;
  opacity: ${({ playing }) => (playing ? 0 : 1)};
  pointer-events: ${({ playing }) => (playing ? 'none' : 'auto')};

  ${({ controlsVisible, playing }) => isMobileDevice && css`
    width: 100%;
    height: 100%;
    overflow: hidden;
    justify-content: center;
    opacity:  ${controlsVisible || !playing ? 1 : 0};
    pointer-events: ${controlsVisible || !playing ? 'auto' : 'none'};
  `}
`

export const LiveBtn = styled(ButtonBase)<{isLiveTime?: boolean}>`
  height: auto;
  font-weight: bold;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4.5px 8px;
  background-color: ${({ isLiveTime }) => (
    isLiveTime
      ? '#CC0000'
      : 'rgba(130, 130, 130, 0.6)'
  )};
  border-radius: 1.3px;
  margin-right: 25px;

  ${isMobileDevice
    ? css`
      margin-right: 15px;
    `
    : ''};
`

export const ChaptersText = styled.span`
  margin: 0 14px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  text-align: center;
  white-space: nowrap;

  ${isMobileDevice
    ? css`
      margin: 0 5px;
      font-size: 12px;
      width: 15%;
    `
    : ''};
`

type PrevProps = {
  disabled?: boolean,
}

export const Prev = styled(ButtonBase)<PrevProps>`
  width: 29px;
  height: 28px;
  background-image: url(/images/player-prev.svg);
  ${({ disabled }) => (
    disabled
      ? 'opacity: 0.5;'
      : ''
  )}
  ${isMobileDevice
    ? css`
        width: 20px;
        height: 20px;
      `
    : ''};
`

export const Next = styled(Prev)`
  margin-right: 10px;
  transform: rotate(180deg);
`

export const TeamsDetailsWrapper = styled.div`
  position: absolute;
  top: 20px;
  left: 15px;
  font-size: 16px;
  color: #FFFFFF;
  z-index: 50;
`
export const WarningIosWrapper = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 80%;
`

export const WarningIosText = styled.span`
  color: red;
  text-align: center;
  font-size: 14px;
`

export const EpisodeInfo = styled.div`
  position: absolute;
  top: 13px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: max(0.755rem, 12px);
  font-weight: 600;
  color: ${({ theme }) => theme.colors.white};
  z-index: 1;
`

export const EpisodeInfoName = styled.span`
  font-size: max(1.227rem, 10px);
  text-align: right;
  line-height: 1.1;
`

export const EpisodeInfoOrder = styled.span`
  font-size: max(1.227rem, 24px);
  font-weight: 700;
`

export const EpisodeInfoDivider = styled.div`
  display: inline-block;
  width: 3.5px;
  height: max(1.25rem, 22px);
  margin: 0 7px -2px;
  transform: skew(-20deg, 0);
  background-color: ${({ theme }) => theme.colors.white};

  ${isMobileDevice
    ? css`
        margin-left: 9px;
    `
    : ''};
`

export const CloseButton = styled(CloseButtonBase)`
  padding: 0;
  background: none;
  z-index: 1;
  width: max(1.2rem, 23px);
  height: max(1.2rem, 23px);
  position: initial;

  :hover {
    background: none;
  }

  svg {
    width: max(1.2rem, 23px);
    height: max(1.2rem, 23px);
  }
`