"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 = "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 _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; }

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

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 _state = this.state,
          collapse = _state.collapse,
          height = _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: _objectSpread({}, attributes.style, style)
    }, attributes, {
      ref: component => {
        this.element = component;
      },
      className: collapseClass,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 195
      },
      __self: this
    }));
  }

}

Object.defineProperty(Collapse, "propTypes", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: propTypes
});
Object.defineProperty(Collapse, "defaultProps", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: defaultProps
});
var _default = Collapse;
exports.default = _default;