import React from 'react'
import { connect } from 'react-redux'

import actions from 'app/actions'
import { clamp, timestamp } from 'app/utils'

// arrows

const arrows = {
  down: (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
      <polygon points="10.06,16.14 9.51,16.98 20,23.86 30.49,16.98 29.94,16.14 20,22.66" />
    </svg>
  ),
  up: (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
      <polygon points="10.06,23.86 9.51,23.02 20,16.14 30.49,23.02 29.94,23.86 20,17.34" />
    </svg>
  ),
  right: (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 20 40">
      <polygon points="16.98,30.49 16.14,29.94 22.66,20 16.14,10.06 16.98,9.51 23.86,20" />
    </svg>
  ),
  left: (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 20 40">
      <polygon points="23.02,30.49 16.14,20 23.02,9.51 23.86,10.06 17.34,20 23.86,29.94" />
    </svg>
  ),
}

export const Arrow = React.memo(({ type, onClick }) => (
  <div className={'arrow ' + type} onClick={onClick}>
    {arrows[type]}
  </div>
))


// volume toggle

export const VolumeControlIcon = ({ volume }) => (
  <div
    className={volume ? 'volume' : 'volume muted'}
    onClick={e => {
      e && e.stopPropagation()
      actions.audio.setVolume(volume ? 0.0 : 1.0)
    }}
  >
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
      <path d="M5,25h4.17l0,2.5H5V25z M15.33,27.5h4.17V20h-4.17V27.5z M20.5,27.5h4.17v-10H20.5V27.5z M25.67,27.5h4.17V15h-4.17V27.5z
       M30.83,27.5H35v-15h-4.17V27.5z M10.17,27.5h4.17v-5h-4.17V27.5z"/>
    </svg>
  </div>
)
export const VolumeControl = React.memo(VolumeControlIcon)

// play / pause button

export const PlayIcon = (
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
    <polygon points="12.5,11 12.5,29 27.5,20 " />
  </svg>
)
export const PauseIcon = (
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
    <path d="M14.34,12.5h4.16v15h-4.16V12.5z M21.5,27.5h4.17v-15H21.5V27.5z" />
  </svg>
)

export const PlayButton = ({ playing, onClick }) => {
  return (
    <div
      className={playing ? 'playToggle playing' : 'playToggle paused'}
      onClick={e => {
        e && e.stopPropagation()
        if (onClick) {
          onClick(playing)
        } else if (playing) {
          actions.audio.pause()
        } else {
          actions.viewer.playFromClick()
        }
      }}
    >
      {playing ? PauseIcon : PlayIcon}
    </div>
  )
}

// subtitles

export const SubtitleButton = ({ cc }) => {
  return (
    <div
      className={cc ? 'cc-button on' : 'cc-button off'}
      onClick={() => actions.audio.setCC(!cc)}
    >
      {'CC'}
    </div>
  )
}

// player current time

export const PlayerTime = ({ play_ts, duration }) => (
  <span className='playerTime'>
    {timestamp(clamp(play_ts, 0, duration))}
    <span className='playerDuration'>
    {' / '}
    {timestamp(clamp(duration, 0, duration))}
    </span>
  </span>
)

// zoom button

export const ZoomPlus = (
  <svg className='zoomPlus' version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
    <path className='ring' d="M20,35.5c-8.55,0-15.5-6.95-15.5-15.5c0-8.55,6.95-15.5,15.5-15.5S35.5,11.45,35.5,20C35.5,28.55,28.55,35.5,20,35.5z M20,5.5C12,5.5,5.5,12,5.5,20c0,8,6.5,14.5,14.5,14.5S34.5,28,34.5,20C34.5,12,28,5.5,20,5.5z" />
    <path className='ring-inner' d="M20,35.5c-8.55,0-15.5-6.95-15.5-15.5c0-8.55,6.95-15.5,15.5-15.5S35.5,11.45,35.5,20C35.5,28.55,28.55,35.5,20,35.5z" />
    <path className='cross' d="M27.5,19.5h-7v-7h-1v7h-7v1h7v7h1v-7h7V19.5z"/>
  </svg>
)

export const SpeakerIcon = (
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
  <path d="M29.11,20.37c0,2.48-1.21,4.74-3.23,6.04l-0.57-0.89c1.71-1.1,2.74-3.03,2.74-5.15c0-2.11-1.06-4.09-2.77-5.18l0.57-0.9
    C27.89,15.59,29.11,17.86,29.11,20.37z M10.89,15.5v9h5.02l5.4,4.38V11.12l-5.4,4.38H10.89z"/>
  </svg>
)

// mobile phone icon
export const MobilePhoneIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16">
    <path fillRule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
    <path fillRule="evenodd" d="M8 14a1 1 0 1 0 0-2a1 1 0 0 0 0 2z"/>
  </svg>
)