import window from 'global/window';
import videojs from 'video.js';
// Add Cardboard button
const Button = videojs.getComponent('Button');

class CardboardButton extends Button {
  constructor(player, options) {
    super(player, options);

    // this.handleVrDisplayActivate_ = videojs.bind(this, this.handleVrDisplayActivate_);
    // this.handleVrDisplayDeactivate_ = videojs.bind(this, this.handleVrDisplayDeactivate_);
    // this.handleVrDisplayPresentChange_ = videojs.bind(this, this.handleVrDisplayPresentChange_);
    // this.handleOrientationChange_ = videojs.bind(this, this.handleOrientationChange_);
    // window.addEventListener('orientationchange', this.handleOrientationChange_);
    // window.addEventListener('vrdisplayactivate', this.handleVrDisplayActivate_);
    // window.addEventListener('vrdisplaydeactivate', this.handleVrDisplayDeactivate_);

    // vrdisplaypresentchange does not fire activate or deactivate
    // and happens when hitting the back button during cardboard mode
    // so we need to make sure we stay in the correct state by
    // listening to it and checking if we are presenting it or not
    // window.addEventListener('vrdisplaypresentchange', this.handleVrDisplayPresentChange_);

    // we cannot show the cardboard button in fullscreen on
    // android as it breaks the controls, and makes it impossible
    // to exit cardboard mode
    // if (videojs.browser.IS_ANDROID) {
    //   this.on(player, 'fullscreenchange', () => {
    //     if (player.isFullscreen()) {
    //       this.hide();
    //     } else {
    //       this.show();
    //     }
    //   });
    // }
  }

  buildCSSClass() {
    return `vjs-button-vr ${super.buildCSSClass()}`;
  }

//   handleVrDisplayPresentChange_() {
//     if (!this.player_.vr().vrDisplay.isPresenting && this.active_) {
//       this.handleVrDisplayDeactivate_();
//     }
//     if (this.player_.vr().vrDisplay.isPresenting && !this.active_) {
//       this.handleVrDisplayActivate_();
//     }
//   }

//   handleOrientationChange_() {
//     if (this.active_ && videojs.browser.IS_IOS) {
//       this.changeSize_();
//     }
//   }

//   changeSize_() {
//     this.player_.width(window.innerWidth);
//     this.player_.height(window.innerHeight);
//     window.dispatchEvent(new window.Event('resize'));
//   }

//   handleVrDisplayActivate_() {
//     // we mimic fullscreen on IOS
//     if (videojs.browser.IS_IOS) {
//       this.oldWidth_ = this.player_.currentWidth();
//       this.oldHeight_ = this.player_.currentHeight();
//       this.player_.enterFullWindow();
//       this.changeSize_();
//     }

//     this.active_ = true;
//   }

//   handleVrDisplayDeactivate_() {
//     // un-mimic fullscreen on iOS
//     if (videojs.browser.IS_IOS) {
//       if (this.oldWidth_) {
//         this.player_.width(this.oldWidth_);
//       }
//       if (this.oldHeight_) {
//         this.player_.height(this.oldHeight_);
//       }
//       this.player_.exitFullWindow();
//     }

//     this.active_ = false;
//   }

  handleClick(event) {
    // if cardboard mode display is not active, activate it
    // otherwise deactivate it
    if (!this.active_) {
      // This starts playback mode when the cardboard button
      // is clicked on Andriod. We need to do this as the controls
      // disappear
    //   if (!this.player_.hasStarted() && videojs.browser.IS_ANDROID) {
    //     this.player_.play();
    //   }
      window.dispatchEvent(new window.Event('vrdisplayactivate'));
      this.active_ = true;
    } else {
      window.dispatchEvent(new window.Event('vrdisplaydeactivate'));
      this.active_ = false;
    }
  }

  dispose() {
    super.dispose();
    // window.removeEventListener('vrdisplayactivate', this.handleVrDisplayActivate_);
    // window.removeEventListener('vrdisplaydeactivate', this.handleVrDisplayDeactivate_);
    // window.removeEventListener('vrdisplaypresentchange', this.handleVrDisplayPresentChange_);
  }

}

videojs.registerComponent('CardboardButton', CardboardButton);

export default CardboardButton;
