import * as React from 'react'

import {Props, State} from './type'
import { BaseComponent, handleComponentClickLog } from '../base-component'

import * as Styled from './index.style'

export class Music extends React.Component<Props, State> {
  public static defaultProps = new Props()
  public state = new State()
  audioDom:any

  public componentWillReceiveProps(props) {
    if (props.play) {
      this.audioDom.removeEventListener('play', this.pauseAudio)
      this.audioDom.play()
    } else {
      // 当audio有autoPlay属性的时候，需要监听play，然后pause才能生效
      this.audioDom.addEventListener('play', this.pauseAudio)
      this.audioDom.pause()
    }
  }

  pauseAudio = () => {
    this.audioDom.pause()
  }

  private toggleMusic = () => {
    if (this.audioDom.paused) {
      this.audioDom.play()
    } else {
      this.audioDom.pause()
    }
  }

  public render() {
    let {
      backgroundImage = null,
      loop,
      backgroundMusic = null,
    } = this.props
    let style: React.CSSProperties
    let audioSrc: string = ''

    if (backgroundMusic) {
      audioSrc = backgroundMusic.url
    }
   
    return (
      <div style={{...style, ...this.props.style}} onClick={
        () => {
          handleComponentClickLog(this.props.instanceKey)
          this.toggleMusic()
        }
      }>
        <BaseComponent {...this.props}>
          {
            backgroundImage && <Styled.backgroundImg src={backgroundImage.url}></Styled.backgroundImg>
          }
          <audio 
            loop={loop} 
            preload='auto'
            src={audioSrc} 
            ref={(dom) => this.audioDom = dom}
          />
          </BaseComponent>
      </div>
      )
  }
}