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
  shouldAutoPlay = false
  @observable
  hasNativeControls = false

  constructor(props: VideoPresetProps) {
    this.setProps(props)
    this.shouldAutoPlay = props.shouldAutoPlay
    this.hasNativeControls = props.hasNativeControls
  }

  @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.shouldAutoPlay = this.shouldAutoPlay
      this.hasNativeControls = this.hasNativeControls ? false : true
    }
  }

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

  @action
  setProps(props: VideoPresetProps) {
    this.shouldAutoPlay = props.shouldAutoPlay
    this.hasNativeControls = props.hasNativeControls
  }
}

export { VideoState }
export default VideoState