/**
 *
 * GeometryCanvasCifdata
 *
 */

import React, { PropTypes } from 'react';
import { withStyles } from 'material-ui/styles';

import { isMobile } from 'react-device-detect';

const jQuery = require('jquery');
window.jQuery = jQuery;
const { ChemDoodle } = require('utils/ChemDoodleWeb');

const styles = () => ({
});

const initialState = {
};

class GeometryCanvasCifdata extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.state = {
      orientation: 'test orientation',
    };
  }
  componentDidMount() {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.innerHTML = `
function _load_lib(url, callback){
  id =  'load_' + url;
  var s = document.createElement('script');
  s.src = url;
  s.id = id;
  s.async = true;
  s.onreadystatechange = s.onload = callback;
  s.onerror = function(){console.warn("failed to load library " + url);};
  document.getElementsByTagName("head")[0].appendChild(s);

}
// Load Libraries
  var rotationMatrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.3]
  rotationMatrix = ChemDoodle.lib.mat4.rotate(rotationMatrix, -.8, [1,0,0]);
  rotationMatrix = ChemDoodle.lib.mat4.rotate(rotationMatrix, +.1, [0,0,1]);

  if(typeof cif_${this.props.uniqueId} === 'undefined' ) {
   let cif_${this.props.uniqueId} 
  }
  if(typeof tfcanvas_${this.props.uniqueId} === 'undefined' ) {
   let tfcanvas_${this.props.uniqueId} 
  }
  //Code
  tfcanvas_${this.props.uniqueId} = new ChemDoodle.TransformCanvas3D('${this.props.id}_view');
  cif_${this.props.uniqueId} = ChemDoodle.readCIF(\`${this.props.cifdata}\`,  ${this.props.x}, ${this.props.y}, ${this.props.z});
  if (typeof alpha_${this.props.uniqueId} === 'undefined') {
  let alpha_${this.props.uniqueId} = 0.; 
  }
  if (typeof beta_${this.props.uniqueId} === 'undefined') {
  let beta_${this.props.uniqueId} = 0.; 
  }
  if (typeof gamma_${this.props.uniqueId} === 'undefined') {
  let gamma_${this.props.uniqueId} = 0.;
  }

  tfcanvas_${this.props.uniqueId}.specs.set3DRepresentation('Ball and Stick');
  tfcanvas_${this.props.uniqueId}.specs.backgroundColor = '${this.props.color}';
  tfcanvas_${this.props.uniqueId}.specs.projectionPerspective_3D = true;
  tfcanvas_${this.props.uniqueId}.specs.compass_display = true;
  tfcanvas_${this.props.uniqueId}.specs.compass_size_3D = 50;
  tfcanvas_${this.props.uniqueId}.specs.atoms_displayLabels_3D = true;
  tfcanvas_${this.props.uniqueId}.specs.crystals_unitCellLineWidth = 5;
  tfcanvas_${this.props.uniqueId}.specs.shapes_color = 'black';
  tfcanvas_${this.props.uniqueId}.specs.shapes_lineWidth = 1;
  tfcanvas_${this.props.uniqueId}.loadContent([cif_${this.props.uniqueId}.molecule], [cif_${this.props.uniqueId}.unitCell]);
  tfcanvas_${this.props.uniqueId}.rotationMatrix = rotationMatrix; tfcanvas_${this.props.uniqueId}.updateScene()

  window.addEventListener('devicemotion', (e) => {
    console.log(JSON.stringify(e.acceleration));
    if(Math.abs(e.acceleration.z) > .1) {
    tfcanvas_${this.props.uniqueId}.rotationMatrix[15] = tfcanvas_${this.props.uniqueId}.rotationMatrix[15]  * (1. - e.acceleration.z * .01);
   tfcanvas_${this.props.uniqueId}.updateScene()
    }

  }, true);

  window.addEventListener('deviceorientation', (e) => {
    console.log(JSON.stringify(e));

  /*ALPHA*/
  /*if(typeof alpha_${this.props.uniqueId} !== 'undefined') {*/
    /*if(.01 < Math.abs(alpha_${this.props.uniqueId} - e.alpha) < 1.5) {*/
    /*tfcanvas_${this.props.uniqueId}.rotationMatrix = ChemDoodle.lib.mat4.rotate(tfcanvas_${this.props.uniqueId}.rotationMatrix,(e.alpha -  alpha_${this.props.uniqueId}) * 0.015,  tfcanvas_${this.props.uniqueId}.rotationMatrix.slice(8, 11));*/
    /*}*/
  /*}*/

  /*GAMMA*/
  /*if (typeof gamma_${this.props.uniqueId} !== 'undefined') {*/
    /*if(.01 < Math.abs(gamma_${this.props.uniqueId} - e.gamma) < 1.5) {*/
  /*tfcanvas_${this.props.uniqueId}.rotationMatrix = ChemDoodle.lib.mat4.rotate(tfcanvas_${this.props.uniqueId}.rotationMatrix,(e.gamma -  gamma_${this.props.uniqueId}) * 0.015,  tfcanvas_${this.props.uniqueId}.rotationMatrix.slice(8, 11));*/
    /*}*/
  /*}*/

  /*BETA*/
  if (typeof beta_${this.props.uniqueId} !== 'undefined') {
    if(0.01 < Math.abs(beta_${this.props.uniqueId} - e.beta) < 1.5) {
  tfcanvas_${this.props.uniqueId}.rotationMatrix =  ChemDoodle.lib.mat4.rotate(tfcanvas_${this.props.uniqueId}.rotationMatrix, -(e.beta -  beta_${this.props.uniqueId}) * 0.015,  [1, 0, 0]);
    }
  }

  alpha_${this.props.uniqueId} = e.alpha;
  beta_${this.props.uniqueId} = e.beta;
  gamma_${this.props.uniqueId} = e.gamma;
   tfcanvas_${this.props.uniqueId}.updateScene()

  }, true);
    `;
    const item = document.getElementById(`${this.props.id}_view`);

    item.appendChild(script);
  }
  componentDidUpdate() {
    this.componentDidMount();
  }
  render() {
    return (
      <div>
        {isMobile === false ? null : <p> Mobile: tilt handheld device.</p> }
        <p id={`${this.props.id}_script`} >
          <canvas
            id={`${this.props.id}_view`}
            height={this.props.height}
            width={this.props.width}
            style={{
              borderWidth: 0,
              borderColor: '#000000',
              borderStyle: 'solid',
            }}
          />
        </p>
      </div>
    );
  }
}
GeometryCanvasCifdata.defaultProps = {
  height: Math.max(Math.min(window.innerWidth * 0.5, 600), 300),
  width: Math.max(Math.min(window.innerWidth * 0.5, 600), 300),
  color: '#fff',
  cifdata: '',
  cifurl: '',
  x: 2,
  y: 2,
  z: 1,
};

GeometryCanvasCifdata.propTypes = {
  uniqueId: PropTypes.string.isRequired,
  cifdata: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  height: PropTypes.number,
  width: PropTypes.number,
  color: PropTypes.string,
  x: PropTypes.number,
  y: PropTypes.number,
  z: PropTypes.number,
};


export default withStyles(styles, { withTheme: true })(GeometryCanvasCifdata);

@@ -2934,361 +2934,8 @@
 ()%0A%0A
-  window.addEventListener('devicemotion', (e) =%3E %7B%0A    console.log(JSON.stringify(e.acceleration));%0A    if(Math.abs(e.acceleration.z) %3E .1) %7B%0A    tfcanvas_$%7Bthis.props.uniqueId%7D.rotationMatrix%5B15%5D = tfcanvas_$%7Bthis.props.uniqueId%7D.rotationMatrix%5B15%5D  * (1. - e.acceleration.z * .01);%0A   tfcanvas_$%7Bthis.props.uniqueId%7D.updateScene()%0A    %7D%0A%0A  %7D, true);%0A%0A
   wi

Take a stab a z-acceleration