"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _exotic = require("exotic");

var _omit2 = require("../utils/omit");

var _jsxFileName = "/Users/michaelfrohberg/Training/mono/packages/modules/collapse/index.js";

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    default: obj
  };
}

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj;
  } else {
    var newObj = {};

    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};

          if (desc.get || desc.set) {
            Object.defineProperty(newObj, key, desc);
          } else {
            newObj[key] = obj[key];
          }
        }
      }
    }

    newObj.default = obj;
    return newObj;
  }
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

const SHOW = 'SHOW';
const SHOWN = 'SHOWN';
const HIDE = 'HIDE';
const HIDDEN = 'HIDDEN';
const propTypes = {
  isOpen: _propTypes.default.bool,
  className: _propTypes.default.node,
  tag: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
  cssModule: _propTypes.default.object,
  navbar: _propTypes.default.bool,
  delay: _propTypes.default.oneOfType([_propTypes.default.shape({
    show: _propTypes.default.number,
    hide: _propTypes.default.number
  }), _propTypes.default.number]),
  onOpened: _propTypes.default.func,
  onClosed: _propTypes.default.func
};
const DEFAULT_DELAYS = {
  show: 0,
  hide: 0
};
const defaultProps = {
  isOpen: false,
  tag: 'div',
  delay: DEFAULT_DELAYS,
  changeHeightOnToggle: false,
  onOpened: () => {},
  onClosed: () => {}
};

class Collapse extends _react.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapse: props.isOpen ? SHOWN : HIDDEN,
      height: null
    };
    this.element = null;
  }

  clearTimeouts() {
    clearTimeout(this.timeoutToAuto);
    clearTimeout(this.timeoutToBigger);
  } // @todo getDerrivedStateFromProps


  componentWillReceiveProps(nextProps) {
    const willOpen = nextProps.isOpen;
    const collapse = this.state.collapse; // this.clearTimeouts()
    // if (nextProps.changeHeightOnToggle !== this.props.changeHeightOnToggle) {

    this.setState({
      height: this.getHeight()
    });

    if (willOpen && collapse === HIDDEN) {
      const handleShow = () => {
        this.setState({
          collapse: SHOWN,
          height: this.getHeight()
        });
      };

      const afterCollapsed = () => {
        // the height transition will work after class "collapsing" applied
        this.setState({
          height: this.getHeight()
        });
        this.transitionTag = setTimeout(handleShow, this.getDelay('show'));
      }; // will open


      this.setState({
        collapse: SHOW,
        height: this.getHeight()
      }, afterCollapsed);
    } else if (!willOpen && collapse === SHOWN) {
      // will hide
      const onSet = () => {
        this.setState({
          collapse: HIDE,
          height: 0
        });
      };

      const handleHide = () => {
        this.setState({
          collapse: HIDDEN,
          height: this.getHeight()
        });
      };

      const afterSet = () => {
        this.setState({
          collapse: HIDE,
          height: this.getHeight()
        }, onSet);
        this.transitionTag = setTimeout(handleHide, this.getDelay('hide'));
      };

      this.setState({
        height: this.getHeight()
      }, afterSet);
    } // else {
    //   console.log('clicked while hiding or showing?!')
    // }
    // else: do nothing.

  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.collapse === SHOWN && prevState && prevState.collapse !== SHOWN) {
      // ignore multi updates
      if (this.timeoutToBigger) {
        return;
      } // === after we are shown, after .5s, double max height
      else {
          this.props.onOpened();
          this.timeoutToBigger = setTimeout(() => {
            // console.event('COLLAPSE_HEIGHT')
            // this.state.height * 2
            // this.setState({ height: 'auto' })
            this.setState({
              height: this.state.height * 3
            });
          }, 1000); // now, reset to auto

          this.timeoutToAuto = setTimeout(() => {
            this.setState({
              height: null
            });
          }, 2000);
        }
    }

    if (this.state.collapse === HIDDEN && prevState && prevState.collapse !== HIDDEN) {
      this.props.onClosed();
    }
  }

  componentWillUnmount() {
    clearTimeout(this.transitionTag);
  }

  getDelay(key) {
    const delay = this.props.delay;

    if ((0, _exotic.isObj)(delay)) {
      return isNaN(delay[key]) ? DEFAULT_DELAYS[key] : delay[key];
    }

    return delay;
  }
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
   */


  getHeight() {
    // window.eh = this
    return this.element.scrollHeight;
  }

  render() {
    const _omit = (0, _omit2.omit)(this.props, ['isOpen', 'delay', 'onOpened', 'onClosed', 'changeHeightOnToggle']),
          navbar = _omit.navbar,
          className = _omit.className,
          cssModule = _omit.cssModule,
          Tag = _omit.tag,
          attributes = _objectWithoutProperties(_omit, ["navbar", "className", "cssModule", "tag"]);

    const _this$state = this.state,
          collapse = _this$state.collapse,
          height = _this$state.height;
    let collapseClass;

    switch (collapse) {
      case SHOW:
        collapseClass = 'collapsing slow showing';
        break;

      case SHOWN:
        collapseClass = 'collapse show slow';
        break;

      case HIDE:
        collapseClass = 'collapsing hide slow';
        break;

      case HIDDEN:
        collapseClass = 'collapse slow hidden';
        break;

      default:
        // HIDDEN
        collapseClass = 'collapse slow hidden';
    } // can animate here - just display with visibility hidden?


    const style = height === 0 || height === null ? {// visibility: 'hidden',
      // height: 0,
    } : {
      // height,
      maxHeight: height // visibility: 'visible',
      // Removed  styles for accordion -  to avoid ** Multiple clicks to open filters **

    };
    return _react.default.createElement(Tag, _extends({
      style: Object.assign({}, attributes.style, style)
    }, attributes, {
      ref: component => {
        this.element = component;
      },
      className: collapseClass,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 195
      },
      __self: this
    }));
  }

}

Collapse.propTypes = propTypes;
Collapse.defaultProps = defaultProps;
var _default = Collapse;
exports.default = _default;