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

import { isMobileDevice } from 'config/userAgent'

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

type HoverStylesProps = {
  visible: boolean,
}

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){
          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')

export const PlayerWrapper = styled.div<PlayStopProps>`
  width: 100%;
  position: relative;
  background-color: #000;

  :fullscreen {
    padding-top: 0;
  }

  ${supportsAspectRatio
    ? css`aspect-ratio: 16 / 9;`
    : css`
        height: 0px;
        padding-top: 56.25%;
      `}
`

export const LoaderWrapper = styled.div`
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`

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 = {
  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;
    `
  )};

  ${isMobileDevice
    ? css`
      width: 20%;
      height: 60%;
      margin-right: 0;
      padding: 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;
  margin-left: 31px;
  background-image: ${({ isFullscreen }) => (
    isFullscreen
      ? 'url(/images/player-fullscreen-off.svg)'
      : 'url(/images/player-fullscreen-on.svg)'
  )};

  ${isMobileDevice
    ? css`
      width: 20px;
      height: 18px;
      margin-left: 0;
    `
    : ''};
`

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`
      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: 6px;
    `
    : ''};
`

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

type PlaybackTimeProps = {
  width?: number,
}

export const PlaybackTime = styled.span<PlaybackTimeProps>`
  width: ${({ width = 130 }) => `${width}px`};
  font-weight: 600;
  font-size: 16px;
  color: #fff;

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

type CenterControlsProps = {
  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')};
  ${isMobileDevice
    ? css`
      width: 70%;
    `
    : ''};
`

export const LiveBtn = styled(ButtonBase)`
  height: auto;
  font-weight: bold;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4.5px 8px;
  background-color: #CC0000;
  border-radius: 1.3px;

  ${isMobileDevice
    ? css`
    @media (max-width: 650px){
      margin-right: 7px;
    }
    `
    : ''};
`