"use strict";

var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
      d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
  return t;
};

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const react_1 = __importDefault(require("react"));

const mobx_react_1 = require("xmobx/mobx-react");

const omit_1 = require("uxui-modules/utils/omit");

const react_animate_height_1 = __importDefault(require("react-animate-height"));

const styled_1 = require("./styled");

const renderProps_1 = require("./renderProps");
/**
 * !!! @mohan
 * @todo split to another file
 * @todo typings
 */


let ObservableAnimatedExpandableCard = class ObservableAnimatedExpandableCard extends react_1.default.Component {
  render() {
    const _a = this.props,
          {
      renderHeaderView,
      renderFooterView,
      renderExpandableView,
      state
    } = _a,
          remainingProps = __rest(_a, ["renderHeaderView", "renderFooterView", "renderExpandableView", "state"]);

    console.debug('renderAnimateHeight view');
    const animatingHeight = state.isExpanded ? 'auto' : 0;
    return react_1.default.createElement(react_1.default.Fragment, {
      key: "animated"
    }, renderHeaderView(remainingProps, state), react_1.default.createElement(react_animate_height_1.default, {
      duration: 500,
      height: animatingHeight
    }, renderExpandableView(remainingProps, state)), renderFooterView(remainingProps, state));
  }

};
ObservableAnimatedExpandableCard = __decorate([mobx_react_1.observer], ObservableAnimatedExpandableCard);
/**
 * predefined function with height animation
 * @note not observable as a renderProp
 */

function renderView(props, state) {
  return react_1.default.createElement(ObservableAnimatedExpandableCard, Object.assign({}, props, {
    state: state
  }));
}

const KNOWN_PROPS = ['renderDefaultView', 'renderExpandedView'];
Object.freeze(KNOWN_PROPS);

class AnimatedExpandableCard extends react_1.default.Component {
  render() {
    const remainingProps = omit_1.omit(this.props, KNOWN_PROPS);
    return react_1.default.createElement(styled_1.StyledExpandableCard, Object.assign({
      renderHeaderView: renderProps_1.defaultRenderHeaderView,
      renderDefaultView: renderView,
      renderExpandedView: renderView
    }, remainingProps));
  }

}

AnimatedExpandableCard.defaultProps = {
  className: '',
  renderToggleButton: renderProps_1.defaultRenderToggleButton,
  renderHeaderView: renderProps_1.defaultRenderHeaderView,
  renderExpandableView: renderProps_1.defaultRenderExpandableView,
  renderFooterView: renderProps_1.defaultRenderFooterView
};
exports.AnimatedExpandableCard = AnimatedExpandableCard;
exports.default = AnimatedExpandableCard; //# sourceMappingURL=AnimatedExpandableCard.js.map