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

import { ButtonBase } from 'features/StreamPlayer/styled'
import { Modal } from 'features/Modal'
import { ModalCloseButton, ModalWindow } from 'features/Modal/styled'

import { isMobileDevice } from 'config/userAgent'

export const SelectedAudioTrack = styled(ButtonBase)`
  width: 200px;
  height: 100%;
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;

  ${isMobileDevice ? css`
    width: 80px;
    font-size: 12px;
  ` : ''}
`

export const AudioTracksWrapper = styled.div`
  position: absolute;
  bottom: 30px;
  z-index: 5;
  background: #333333;
  filter: drop-shadow(0px 2px 40px rgba(0, 0, 0, 0.6));
  border-radius: 2px;
  width: 200px;

  ${isMobileDevice ? css`
    bottom: 45px;
    width: 80px;
  ` : ''}
`

type AudioTrackItemProps = {
  isFullScreen: boolean,
  selected: boolean,
}

export const AudioTrackItem = styled.div<AudioTrackItemProps>`
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  font-weight: normal;

  :hover, :focus {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  ${({ selected }) => (selected ? css`
    font-weight: 600;
    color: #FFFFFF;
  ` : '')}

  ${({ isFullScreen }) => (isMobileDevice ? css`
    justify-content: ${isFullScreen ? 'center' : 'flex-start'};
    padding: 10px 15px;
  ` : '')}
`

export const AudioTrackItemText = styled.span`  
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
`

export const ScModal = styled(Modal)`
  ${ModalWindow} {
    width: 280px;
    position: fixed;
    z-index: 5;
    left: 0;
    right: 0;
    top: 3%;
    padding: 0 0 5px;
    border-radius: 3px;
  }

  ${ModalCloseButton} {
    background: transparent;
    padding: 0;
  }
`

export const ScHeader = styled.div`
  border-bottom: 1px solid #505050;
  padding: 13px 15px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
`

export const IconArrow = styled.div<{ active: boolean}>`
  width: 13px;
  height: 13px;
  margin-left: 5px;
  background: url(/images/boldArrowWhite.svg) no-repeat;
  background-size: contain;
  background-position: center;

  ${({ active }) => (active ? css`
    transform: rotate(180deg);
  ` : '')}
`
