import React, {Component, PropTypes} from 'react';
import {createStyleSheet} from 'stylishly';
import ClassNames from 'classnames';
import Transition from 'react-overlays/lib/Transition';

const reflow = (elem) => elem.offsetHeight;

export const styleSheet = createStyleSheet('Collapse', (theme) => {
  return {
    container: {
      height: 0,
      overflow: 'hidden',
      transition: theme.transitions.create('height'),
    },
    entered: {
      height: 'auto',
    },
  };
});

export default class Collapse extends Component {
  static propTypes = {
    /**
     * Set to true to automatically calculate transition time based on height
     */
    autoDuration: PropTypes.bool,
    /**
     * The content node to be collapsed.
     */
    children: PropTypes.node,
    /**
     * Set to true to transition in
     */
    in: PropTypes.bool,
  };

  static defaultProps = {
    autoDuration: false,
    in: false,
  };

  static contextTypes = {
    styleManager: PropTypes.object.isRequired,
  };

  handleEnter = (element) => {
    element.style.height = 0;
  };

  handleEntering = (element) => {
    const {autoDuration} = this.props;
    const wrapperHeight = this.wrapper.clientHeight;
    if (autoDuration) {
      element.style.transitionDuration = `${this.getTransitionDuration(wrapperHeight)}ms`;
    }
    element.style.height = `${wrapperHeight}px`;
  };

  handleEntered = (element) => {
    element.style.height = 'auto';
  };

  handleExit = (element) => {
    element.style.height = `${this.wrapper.clientHeight}px`;
    reflow(element);
  };

  handleExiting = (element) => {
    element.style.height = 0;
  };

  getTransitionDuration(wrapperHeight) {
    if (!wrapperHeight) {
      return 0;
    }
    const constant = wrapperHeight / 36;
    return Math.round(175 / constant + 25) * constant;
  }

  render() {
    const {children, ...other} = this.props;
    const classes = this.context.styleManager.render(styleSheet);

    const containerClassname = ClassNames({
      [classes.container]: true,
      [classes.entered]: this.props.in,
    });

    return (
      <Transition
        onEnter={this.handleEnter}
        onEntering={this.handleEntering}
        onEntered={this.handleEntered}
        onExit={this.handleExit}
        onExiting={this.handleExiting}
        timeout={300}
        {...other}
      >
        <div className={containerClassname}>
          <div ref={(c) => this.wrapper = c}>
            {children}
          </div>
        </div>
      </Transition>
    );
  }
}

@@ -566,136 +566,8 @@
 /**%0A
-     * Set to true to automatically calculate transition time based on height%0A     */%0A    autoDuration: PropTypes.bool,%0A    /**%0A
     
@@ -717,16 +717,195 @@
 s.bool,%0A
+    /**%0A     * Set to 'auto' to automatically calculate transition time based on height%0A     */%0A    transitionDuration: PropTypes.oneOfType(%5BPropTypes.number, PropTypes.string%5D),%0A
   %7D;%0A%0A  
@@ -1165,20 +1165,26 @@
  const %7B
-auto
+transition
 Duration
@@ -1252,24 +1252,25 @@
 Height;%0A
+%0A
     if (
 autoDura
@@ -1265,24 +1265,75 @@
 if (
-autoDuration
+transitionDuration) %7B%0A      if (transitionDuration === 'auto'
 ) %7B%0A
+  
     
@@ -1419,25 +1419,241 @@
 t)%7Dms%60;%0A    
-%7D
+  %7D else if (typeof transitionDuration === 'number') %7B%0A        element.style.transitionDuration = %60$%7BtransitionDuration%7Dms%60;%0A      %7D else %7B%0A        element.style.transitionDuration = transitionDuration;%0A      %7D%0A    %7D%0A
 %0A    element

change prop for auto transition duration