"use strict";

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

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

var _mobx = require("xmobx/mobx");

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

var _chainAble = require("../chain-able");

var _exotic = require("../exotic");

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

var _jsxFileName = "collapse/index.todo.js";

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

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 = {}; 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]; } 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

function toCommonState(props) {
  const state = (0, _mobx.observable)(_objectSpread({}, props, {
    instance: {},

    get collapseClassName() {
      let collapseClass;

      switch (state.isCollapsed) {
        case SHOW:
          collapseClass = 'collapsing slow';
          break;

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

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

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

        default:
          // HIDDEN
          collapseClass = 'collapse slow';
      }

      return collapseClass;
    },

    handleOpenFromHidden() {
      const handleShow = () => {
        state.isCollapsed = SHOWN;
        state.height = null;
      };

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


      state.isCollapsed = SHOWN; // @todo is not async or optimized -.-

      afterCollapsed(); // instance.setState({}, afterCollapsed)
    },

    handleHideFromOpen() {
      const instance = state.instance; // will hide

      const onSet = () => {
        instance.collapse = HIDE;
        instance.height = 0;
      };

      const handleHide = () => {
        instance.collapse = HIDDEN;
        instance.height = null;
      };

      const afterSet = () => {
        instance.collapse = HIDE;
        instance.height = instance.getHeight();
        onSet(); // instance.setState({
        //   collapse: HIDE,
        //   height: instance.getHeight(),
        // }, onSet)

        instance.transitionTag = setTimeout(handleHide, instance.getDelay('hide'));
      };

      instance.height = instance.getHeight();
      afterSet(); // instance.setState({ height: instance.getHeight() }, afterSet)
    },

    updateFromProps(instance, willOpen) {
      const isCollapsed = state.isCollapsed;
      state.instance = instance;

      if (willOpen && isCollapsed === HIDDEN) {
        state.handleOpenFromHidden();
      } else if (!willOpen && isCollapsed === SHOWN) {
        state.handleHideFromOpen();
      }
    }

  }));
} // @observer


let Collapse = class Collapse extends _react.default.Component {
  constructor(props) {
    super(props);

    this.setRef = dom => {
      this.element = dom;
    };

    this.state = toCommonState({
      isCollapsed: props.isOpen ? SHOWN : HIDDEN,
      height: null
    });
    this.element = null;
  }

  componentWillReceiveProps(nextProps) {
    const willOpen = nextProps.isOpen;
    this.state.updateFromProps(this, willOpen);
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.collapse === SHOWN && prevState && prevState.collapse !== SHOWN) {
      this.props.onOpened();
    }

    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;
  }

  getHeight() {
    return this.element.scrollHeight;
  }

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

    const _state = this.state,
          height = _state.height,
          collapseClassName = _state.collapseClassName;
    const heightStyle = height === null ? null : {
      height
    };

    const style = _objectSpread({}, attributes.style, heightStyle);

    return _react.default.createElement(Tag, _extends({}, attributes, {
      style: style,
      ref: this.setRef,
      className: collapseClassName,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 179
      },
      __self: this
    }));
  }

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