import { append, setStyle, tooltip } from '../utils'

export default function playAndPause(option) {
  return art => ({
    ...option,
    mounted: ($control) => {
      const { proxy, icons, i18n } = art

      const $play = append($control, icons.play)
      const $pause = append($control, icons.pause)
      tooltip($play, i18n.get('Play'))
      tooltip($pause, i18n.get('Pause'))

      proxy($play, 'click', () => {
        art.play()
      })

      proxy($pause, 'click', () => {
        art.pause()
      })

      function showPlay() {
        setStyle($play, 'display', 'flex')
        setStyle($pause, 'display', 'none')
      }

      function showPause() {
        setStyle($play, 'display', 'none')
        setStyle($pause, 'display', 'flex')
      }

      if (art.playing) {
        showPause()
      }
      else {
        showPlay()
      }

      art.on('video:playing', () => {
        showPause()
      })

      art.on('video:pause', () => {
        showPlay()
      })
    },
  })
}