import { observable, action } from 'xmobx/mobx'
import { VideoPresetProps } from './typings'

// I don't think we need it since we have native controls
// @observable isFocused = false

class VideoState {
  // meta
  @observable isPlaying = false
  @observable hasBeenPlayedAtLeastOnce = false

  // props
  @observable autoPlay = false
  @observable controls = false

  constructor(props: VideoPresetProps) {
    this.setProps(props)
  }

  @action
  setIsPlaying(isPlaying: boolean) {
    this.isPlaying = isPlaying
    console.debug('[Video] setIsPlaying: ' + isPlaying)

    // we have this to make sure
    if (isPlaying === true) {
      if (this.hasBeenPlayedAtLeastOnce === false) {
        this.hasBeenPlayedAtLeastOnce = true
      }
      this.autoPlay = true
      this.controls = true
    }
  }

  @action.bound
  toggleIsPlaying() {
    this.setIsPlaying(!this.isPlaying)
  }

  @action
  setProps(props: VideoPresetProps) {
    this.autoPlay = props.autoPlay
    this.controls = props.controls
  }
}

export { VideoState }
export default VideoState