function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';

var Card =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Card, _React$Component);

  function Card() {
    return _React$Component.apply(this, arguments) || this;
  }

  var _proto = Card.prototype;

  // constructor (props) {
  // 	super(props);
  //
  // 	this.state = {
  // 		animationClass: ''
  // 	};
  // 	this.closeModal = this.closeModal.bind(this);
  // }
  // componentWillReceiveProps(nextProps){
  //   this.props.show !== nextProps.show
  //   && nextProps.show
  //   && setTimeout(() => {
  //     this.setState({ animationClass: 'in' });
  //   }, 0);
  // }
  //
  // closeModal () {
  // 	this.setState({ animationClass: '' });
  //
  // 	return setTimeout(() => {
  // 		this.props.onHide();
  // 	}, 300);
  // }
  //
  // getModalContent () {
  // 	const {headerLabel, showCloseButton, size} = this.props;
  //
  // 	return (
  // 		<div
  // 			className={`modal-content ${size}`}
  // 		>
  // 			{
  // 				headerLabel
  // 				&&
  // 					<ModalHeader
  // 						showCloseButton={showCloseButton}
  // 						headerLabel={headerLabel}
  // 						onHide={this.closeModal}
  // 					/>
  // 			}
  // 			{this.props.children}
  // 		</div>
  //   );
  // }
  _proto.render = function render() {
    var _this$props = this.props,
        headerLabel = _this$props.headerLabel,
        label = _this$props.label,
        headerBorder = _this$props.headerBorder,
        headerColor = _this$props.headerColor,
        headerAlign = _this$props.headerAlign,
        sizeNum = _this$props.sizeNum,
        nav = _this$props.nav; //
    // const renderModal = () => {
    // 	return show
    // 	&& (
    // 		<AriaModal
    //       onExit={this.closeModal}
    //       getApplicationNode={() => document.querySelector('#app')}
    // 			dialogClass={
    // 				`reveal-modal` +
    // 				` ${size === 'dialog' ? 'dialog' : 'full'}` +
    // 				` ${size === 'dialog' ? 'fade' : 'reveal-bottom'}` +
    // 				` ${className}` +
    // 				` ${this.state.animationClass}`
    // 			}
    // 			dialogStyle={{
    // 				zIndex: 1051,
    // 				display: 'block',
    // 				visibility: 'visible'
    // 			}}
    //       includeDefaultStyles={false}
    //       titleId={htmlId}
    //       key={1}
    //       underlayStyle={
    //         backdrop
    //         ? {
    //             zIndex: 1040,
    //             display: 'block',
    //             visibility: 'visible'
    //           }
    //         : {}
    //       }
    //       underlayClass={
    //         backdrop
    //         ? (
    //             `reveal-modal-bg fade` +
    //             ` ${this.state.animationClass}`
    //           )
    //         : ''
    //       }
    //       underlayClickExits={backdropClickExit}
    //       escapeExits={escapeExits}
    // 		>
    // 			{this.getModalContent()}
    // 		</AriaModal>
    // 	);
    // };

    var getHeader = function getHeader() {
      return React.createElement("header", {
        className: "" + (headerAlign && "align-" + headerAlign || '')
      }, React.createElement("h4", null, headerLabel));
    };

    return React.createElement("div", {
      className: 'cui-card' + ("" + (sizeNum && " cui-card--" + sizeNum || '')) + ("" + (nav && ' cui-card--nav' || '')) + ("" + (headerBorder && ' header-border' || '')) + ("" + (headerColor && " header-background " + headerColor || ''))
    }, React.createElement("article", {
      style: nav && {
        padding: '1rem',
        textAlign: 'center'
      }
    }, headerLabel && getHeader(), React.createElement("h4", null, label)));
  };

  return Card;
}(React.Component);

Card.displayName = 'Card';
Card.defaultProps = {
  header: '',
  headerAlign: null,
  headerBackground: '',
  headerBorder: false,
  headerColor: '',
  headerLabel: '',
  label: '',
  size: '',
  sizeNum: 0,
  nav: false // children: null,
  // show: false,
  // size: 'default',
  // backdrop: true,
  // className: '',
  // showCloseButton: true,
  // headerLabel: '',
  // backdropClickExit: false,
  // escapeExits: true

};
Card.propTypes = {
  // /** Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing. */
  // htmlId: PropTypes.string.isRequired,
  // /**
  //  * Children components
  //  */
  // children: PropTypes.node,
  // /**
  //  * show/hide modal.
  //  */
  // show: PropTypes.bool.isRequired,
  // /**
  //  * callback function invoked on close of the modal. modal can be closed on click of cross button or esc key.
  //  * onHide is mandatory props, if not passed modal can not be closed.
  //  */
  // onHide: PropTypes.func.isRequired,
  // /**
  //  * css class names
  //  */
  // className: PropTypes.string,
  // /**
  //  *  To show/hide backdrop of the modal.
  //  *  if backdrop is false then modal will become normal popup without backdrop and user can perform any action in parent screen.
  //  */
  // backdrop: PropTypes.bool,

  /** @prop Alignment of header | null */
  headerAlign: PropTypes.oneOf(['left', 'center']),

  /** @prop Set visitibility of the header's border | false */
  headerBorder: PropTypes.bool,

  /** @prop Set header color | '' */
  headerColor: PropTypes.string,

  /** @prop Set header's Text | '' */
  headerLabel: PropTypes.string,

  /** @prop Set Card Text | '' */
  label: PropTypes.string,

  /** @prop Set size of the card from list of prefined strings | '' */
  size: PropTypes.oneOf(['small', 'medium', 'large', 'full']),

  /** @prop Set number to define size | 0 */
  sizeNum: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),

  /** @prop Sets of Card is used for nav | false */
  nav: PropTypes.bool
};
export default Card;