import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import React from 'react';
import { isFunctionalComponent } from "../../lib/utils";
import { createPropsGetter } from "../../lib/createPropsGetter";

// TODO We should output state too
var renderPropsDesc = function renderPropsDesc(props) {
  return Object.keys(props).map(function (key) {
    var value = props[key];
    switch (typeof value) {
      case 'boolean':
        return value ? key : key + ": false";
      case 'string':
        return key + ": \"" + value + "\"";
      case 'object':
        if ( /*#__PURE__*/React.isValidElement(value)) {
          return /*#__PURE__*/React.createElement('span', {}, [key + ": ", value]);
        }
        return key + ": " + JSON.stringify(value);
      default:
        return key + ": " + value;
    }
  }).map(function (node, index, nodes) {
    return /*#__PURE__*/(
      React.createElement("span", {
        key: index
      }, node, " ", index + 1 < nodes.length ? ', ' : null)
    );
  });
};
export var ComponentTable = /*#__PURE__*/function (_React$Component) {
  function ComponentTable() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.getProps = createPropsGetter(ComponentTable.defaultProps);
    return _this;
  }
  _inheritsLoose(ComponentTable, _React$Component);
  var _proto = ComponentTable.prototype;
  _proto.render = function render() {
    var _this$props = this.props,
      _this$props$rows = _this$props.rows,
      rows = _this$props$rows === void 0 ? [] : _this$props$rows,
      _this$props$cols = _this$props.cols,
      cols = _this$props$cols === void 0 ? [] : _this$props$cols,
      Component = _this$props.Component;
    var _this$getProps = this.getProps(),
      presetProps = _this$getProps.presetProps,
      presetState = _this$getProps.presetState;
    return /*#__PURE__*/(
      React.createElement("table", {
        style: {
          borderSpacing: 10,
          marginBottom: 20
        }
      }, /*#__PURE__*/
      React.createElement("caption", {
        style: {
          captionSide: 'bottom'
        }
      }, renderPropsDesc(presetProps)), /*#__PURE__*/
      React.createElement("thead", null, /*#__PURE__*/
      React.createElement("tr", null, /*#__PURE__*/
      React.createElement("th", null), cols.map(function (_ref, i) {
        var _ref$props = _ref.props,
          colProps = _ref$props === void 0 ? {} : _ref$props;
        return /*#__PURE__*/(
          React.createElement("th", {
            style: {
              whiteSpace: 'nowrap'
            },
            key: i
          }, renderPropsDesc(colProps))
        );
      }))), /*#__PURE__*/
      React.createElement("tbody", null, rows.map(function (_ref2, rowIndex) {
        var _ref2$props = _ref2.props,
          rowProps = _ref2$props === void 0 ? {} : _ref2$props,
          _ref2$state = _ref2.state,
          rowState = _ref2$state === void 0 ? {} : _ref2$state;
        return /*#__PURE__*/(
          React.createElement("tr", {
            key: rowIndex
          }, /*#__PURE__*/
          React.createElement("td", {
            style: {
              whiteSpace: 'nowrap'
            }
          }, renderPropsDesc(rowProps)), cols.map(function (_ref3, colIndex) {
            var _ref3$props = _ref3.props,
              colProps = _ref3$props === void 0 ? {} : _ref3$props,
              _ref3$state = _ref3.state,
              colState = _ref3$state === void 0 ? {} : _ref3$state;
            return /*#__PURE__*/(
              React.createElement("td", {
                key: colIndex
              }, /*#__PURE__*/

              React.createElement(Component, _extends({}, presetProps, rowProps, colProps, {
                ref:
                // NOTE Call setState from outside is bad practice, but here it needed for test state combinations
                isFunctionalComponent(Component) ? undefined : function (el) {
                  return el && el.setState(function (state) {
                    return _extends({}, state, presetState, rowState, colState);
                  });
                }
              })))
            );
          }))
        );
      })))
    );
  };
  return ComponentTable;
}(React.Component);
ComponentTable.defaultProps = {
  presetProps: {},
  presetState: {}
};