'use strict'
import React from 'react'
import classNames from 'classnames'
let _ = require('lodash')

let DisplayableComponent = React.createClass({
  render: function () {
    const WidgetFactory = require('./widgetFactory')
    let Widget = WidgetFactory(this.props.component)

    let widgetStyle = _.merge({transform: ''}, this.props.componentStyle || {}), componentStyle = {transform: ''}

    let translate3D = {}
    translate3D.x = this.props.component.x || 0
    translate3D.y = this.props.component.y || 0
    translate3D.z = this.props.component.z || 0
    componentStyle.transform += ' translate3d(' + translate3D.x + 'px,' + translate3D.y + 'px,' + translate3D.z + 'px)'
    this.props.component.width && (componentStyle.width = this.props.component.width)
    this.props.component.height && (componentStyle.height = this.props.component.height)
    let scaleX = (this.props.component.scale && this.props.component.scale.x) || 1
    let scaleY = (this.props.component.scale && this.props.component.scale.y) || 1
    componentStyle.transform += " scale(" + scaleX + "," + scaleY + ")"
    if (this.props.component.rotate) {
      let rotStr = ''
      this.props.component.rotate.z && (rotStr += " rotateZ(" + this.props.component.rotate.z + "rad)")
      this.props.component.rotate.y && (rotStr += " rotateY(" + this.props.component.rotate.y + "rad)")
      this.props.component.rotate.x && (rotStr += " rotateX(" + this.props.component.rotate.x + "rad)")
      if (this.props.combinedTransform) {
        componentStyle.transform += rotStr
      }
      else {
        widgetStyle.transform += rotStr
      }
    }
    if (this.props.component.skew) {
      let rotStr = ''
      this.props.component.skew.y && (rotStr += " skewY(" + this.props.component.skew.y + "rad)")
      this.props.component.skew.x && (rotStr += " skewX(" + this.props.component.skew.x + "rad)")
      if (this.props.combinedTransform) {
        componentStyle.transform += rotStr
      }
      else {
        widgetStyle.transform += rotStr
      }
    }
    return (
      <div
        {...this.props}
        className={classNames("sp-component", this.props.ownClassName,this.props.className)}
        style={componentStyle}>
        <div
          className={this.props.className}
          style={{height: '100%'}}
        >
          <Widget
            {...this.props}
            className="sp-widget"
            style={widgetStyle}
            setDraggable={this.props.setDraggable}
          />
        </div>
        {this.props.children}
      </div>)
  }
})
module.exports = DisplayableComponent

@@ -1185,17 +1185,17 @@
 .rotate.
-z
+x
  && (rot
@@ -1213,9 +1213,9 @@
 tate
-Z
+X
 (%22 +
@@ -1243,17 +1243,17 @@
 .rotate.
-z
+x
  + %22rad)
@@ -1385,33 +1385,33 @@
 omponent.rotate.
-x
+z
  && (rotStr += %22
@@ -1409,33 +1409,33 @@
 tStr += %22 rotate
-X
+Z
 (%22 + this.props.
@@ -1443,33 +1443,33 @@
 omponent.rotate.
-x
+z
  + %22rad)%22)%0A     
@@ -2034,24 +2034,192 @@
     %7D%0A    %7D%0A
+    if (widgetStyle.transform === '') %7B%0A      delete widgetStyle.transform%0A    %7D%0A    if (componentStyle.transform === '') %7B%0A      delete componentStyle.transform%0A    %7D%0A
     return (

make sure rotation order matches between overview and presentation.