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

import actions from 'app/actions'
import { 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 }) => (
  <div className={'arrow ' + type}>
    {arrows[type]}
  </div>
))


// volume toggle

const VolumeIcon = React.memo(({ muted }) => (
  <div className={muted ? 'volume muted' : 'volume'} onClick={() => actions.audio.toggleMuted()}>
    <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 = connect(state => ({
  muted: state.audio.muted,
}))(VolumeIcon)


// play / pause button

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

const PlayButtonIcon = ({ playing }) => {
  return (
    <div
      className='playToggle'
      onClick={() => playing ? actions.audio.pause() : actions.audio.play()}
    >
      {playing ? PauseIcon : PlayIcon}
    </div>
  )
}

export const PlayButton = connect(state => ({
  playing: state.audio.playing,
}))(PlayButtonIcon)


// player current time

const PlayerTimeSpan = ({ play_ts, duration }) => (
  <span className='playerTime'>
    {timestamp(play_ts)}
    {' / '}
    {timestamp(duration)}
  </span>
)

export const PlayerTime = connect(state => ({
  play_ts: state.audio.play_ts,
  duration: state.align.timeline.duration,
}))(PlayerTimeSpan)