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

import { isMobileDevice } from 'config/userAgent'

export const Wrapper = styled.div`
  display: flex;
  align-items: center;
  margin-right: 18px;
  ${isMobileDevice
    ? css`
      margin-right: 0;
    `
    : ''};
  
`

type VolumeButtonProps = {
  muted: boolean,
}

export const VolumeButton = styled.button<VolumeButtonProps>`
  outline: none;
  border: none;
  padding: 0;
  width: 40px;
  height: 26px;
  margin-right: 9px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: transparent;
  background-image: ${({ muted }) => (
    muted
      ? 'url(/images/player-volume-off.svg)'
      : 'url(/images/player-volume-on.svg)'
  )};

  ${isMobileDevice
    ? css`
      width: 20px;
      background-size: contain;
      margin-right: 3px;
    `
    : ''};
`

export const VolumeProgressList = styled.div`
  width: 77px;
  height: 4px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;

  ${isMobileDevice
    ? css`
      margin-right: 10px;
      @media (orientation: landscape){
        display: block;
      }
    `
    : ''};
`

type VolumeProgressProps = {
  value: number,
}

export const VolumeProgress = styled.div<VolumeProgressProps>`
  height: 100%;
  width: ${({ value }) => value}%;
  background-color: #fff;
`

export const Scrubber = styled.div<VolumeProgressProps>`
  border: none;
  outline: none;
  width: 13px;
  height: 13px;
  left: ${({ value }) => value}%;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  transform: translate(-50%, -65%);
  cursor: pointer;
  
  ${isMobileDevice
    ? css`
      width: 10px;
      height: 12px;
    `
    : ''};
`
