var widgets = require('@jupyter-widgets/base');
var _ = require('lodash');

import ParaViewWebClient from 'paraviewweb/src/IO/WebSocket/ParaViewWebClient';
import RemoteRenderer from 'paraviewweb/src/NativeUI/Canvas/RemoteRenderer';
import SizeHelper from "paraviewweb/src/Common/Misc/SizeHelper";
import SmartConnect from 'wslink/src/SmartConnect';

export var RemoteRendererModel = widgets.DOMWidgetModel.extend({
  defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
    _model_name: 'RemoteRendererModel',
    _view_name: 'RemoteRendererView',
    _model_module: 'pvlink',
    _view_module: 'pvlink',
    _model_module_version: '0.1.0',
    _view_module_version: '0.1.0',
  })
});

export var RemoteRendererView = widgets.DOMWidgetView.extend({
  render: function () {
    var that = this;
    
    // div to hold the canvas of the RemoteRenderer.
    var render_div = document.createElement('div');
    render_div.style.height = '100%';
    render_div.style.width = '100%';
    this.el.appendChild(render_div);

    /* Get configuration for SmartConnect.
    *  SmartConnect will establish a direct
    *  WebSocket connection using Autobahn. 
    */
    var config = {
      sessionURL: this.model.get('sessionURL'),
      secret: this.model.get('authKey')
    };
    var smartConnect = SmartConnect.newInstance({ config: config });

    smartConnect.onConnectionReady(function (connection) {
      // Create the RemoteRenderer
      var pvwClient = ParaViewWebClient.createClient(connection, [
        'MouseHandler',
        'ViewPort',
        'ViewPortImageDelivery']
      );
      var renderer = new RemoteRenderer(pvwClient);
      renderer.setContainer(render_div);
      renderer.setView(that.model.get('viewID'));
      renderer.onImageReady(function () {
        // Resize when the renderer is placed within a widget.
        if (that.el.style.width != '100%') {
          that.el.style.width = '100%';
          renderer.resize();
        }
        console.log("We are good.");
      });

      // Handle size changes when the entire window is resized.
      SizeHelper.onSizeChange(function () {
        renderer.resize();
      });
      SizeHelper.startListening();

      // Explicit render called from python side.
      that.model.on('change:_update', function () {
        renderer.render(true);
      }, that);
    });

    smartConnect.connect();
  },
});