(function (context, $) {

  "use strict"

  context.JK = context.JK || {}
  context.JK.StepVideoGear = function (app, $dialog) {
    var $step = null
    var webcamViewerReact = null;
    var $instructions = null;
    var $noWebcamList = null;
    function initialize(_$step) {
      $step = _$step
      var reactElement = React.createElement(window.WebcamViewer, {isVisible: false});
      var reactDomNode = $step.find(".webcam-container").get(0)
      webcamViewerReact = React.render(reactElement, reactDomNode)

      $instructions = $step.find('.instructions')
      $noWebcamList = $step.find('ul.no-webcam')
      window.VideoStore.listen(onVideoStoreUpdated);
    }

    function onVideoStoreUpdated(videoState) {
      var noWebcams = Object.keys(videoState.deviceNames).length == 0
      var isWindows = window.PlatformStore.isWindows();

      $instructions.removeClass('has-webcam no-webcam')
      if(noWebcams) {
        $instructions.addClass('no-webcam')
      }
      else {
        $instructions.addClass('has-webcam')
      }

      $noWebcamList.removeClass('is-windows is-not-windows')
      if(isWindows) {
        $noWebcamList.addClass('is-windows')
      }
      else {
        $noWebcamList.addClass('is-not-windows')
      }
    }

    function beforeShow() {
      $dialog.getWizard().getDialog().find('h1.top-header').text('video gear setup')
      webcamViewerReact.beforeShow()
    }

    function beforeHide() {
      $dialog.getWizard().getDialog().find('h1.top-header').text('audio gear setup')
      webcamViewerReact.beforeHide()
    }

    this.beforeShow = beforeShow
    this.beforeHide = beforeHide
    this.initialize = initialize
    
    return this
  }
})(window, jQuery)