import dat from 'dat-gui';

import {DatMeshModule} from './DatMeshModule';
import {DatLightModule} from './DatLightModule';
import {DatCameraModule} from './DatCameraModule';
import {DatCustomModule} from './DatCustomModule';

// Polyfill
dat.GUI.prototype.removeFolder = function(name) {
  var folder = this.__folders[name];
  if (!folder) {
    return;
  }
  folder.close();
  this.__ul.removeChild(folder.domElement.parentNode);
  delete this.__folders[name];
  this.onResize();
}

export default class DatGUIModule {
  static new(params) {
    return new DatGUIModule(new dat.GUI(params));
  }

  constructor(gui = new dat.GUI()) {
    this.gui = gui;
  }

  set(gui) {
    this.gui = gui;
    return this;
  }

  folder(name = 'folder') {
    return new DatGUIModule(this.gui.addFolder(name));
  }

  Mesh(params = {}, gui = this.gui) {
    return new DatMeshModule(params, gui);
  }

  Light(params = {}, gui = this.gui) {
    return new DatLightModule(params, gui);
  }

  Camera(params = {}, gui = this.gui) {
    return new DatCameraModule(params, gui);
  }

  Custom(params = {}, gui = this.gui) {
    return new DatCustomModule(params, gui);
  }
}

DatGUIModule.dat = dat;

@@ -624,16 +624,34 @@
 dat.GUI(
+%7BautoPlace: false%7D
 )) %7B%0A   
@@ -672,16 +672,249 @@
 i;%0A  %7D%0A%0A
+  manager(manager) %7B%0A    const dom = this.gui.domElement;%0A    const style = dom.style;%0A%0A    style.position = 'absolute';%0A    style.top = 0;%0A    style.right = '20px';%0A%0A    manager.get('element').appendChild(this.gui.domElement);%0A  %7D%0A%0A
   set(gu

Add dat.gui to app dom element