"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.CatalogGridDetails = void 0;

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

var _CatalogItemIcon = require("./CatalogItemIcon");

var _Icon = require("../Icon");

var _FlexBlock = require("../flexBlock/FlexBlock");

var _functions = require("../../utils/functions");

var CatalogGridDetails =
/*#__PURE__*/
function (_React$Component) {
  (0, _inheritsLoose2.default)(CatalogGridDetails, _React$Component);

  function CatalogGridDetails() {
    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;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ref", _react.default.createRef());
    return _this;
  }

  var _proto = CatalogGridDetails.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var shouldScrollIntoView = this.props.shouldScrollIntoView;

    if (shouldScrollIntoView) {
      (0, _functions.scrollEelementIntoView)(this.ref.current);
    }
  };

  _proto.renderIcon = function renderIcon() {
    var _this$props = this.props,
        icon = _this$props.icon,
        color = _this$props.color;

    if (_react.default.isValidElement(icon)) {
      return icon;
    }

    return _react.default.createElement(_CatalogItemIcon.CatalogItemIcon, {
      isRound: true,
      size: 40,
      iconName: icon,
      backgroundColor: color
    });
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        colCount = _this$props2.colCount,
        index = _this$props2.index,
        children = _this$props2.children,
        testAutomationId = _this$props2.testAutomationId,
        title = _this$props2.title,
        close = _this$props2.close;
    return _react.default.createElement("div", {
      ref: this.ref,
      className: "rc-catalog-grid-details",
      "data-test-automation-id": testAutomationId
    }, _react.default.createElement("div", {
      style: {
        left: 100 / colCount * (index % colCount + 0.5) + "%"
      },
      className: "rc-catalog-grid-details__tip"
    }), _react.default.createElement(_FlexBlock.FlexBlock, {
      justify: _FlexBlock.FlexBlock.SPACE_BETWEEN,
      className: "rc-catalog-grid-details__header"
    }, _react.default.createElement(_FlexBlock.FlexBlock, {
      align: _FlexBlock.FlexBlock.CENTER
    }, this.renderIcon(), _react.default.createElement("div", {
      className: "rc-catalog-grid-details__title",
      "data-test-automation-id": "title"
    }, title)), _react.default.createElement("button", {
      onClick: close,
      className: "rc-catalog-grid-details__close",
      "data-test-automation-id": "closeButton"
    }, _react.default.createElement(_Icon.Icon, {
      name: "close"
    }))), _react.default.createElement("div", {
      "data-test-automation-id": "gridDetailsChildren"
    }, children));
  };

  return CatalogGridDetails;
}(_react.default.Component);

exports.CatalogGridDetails = CatalogGridDetails;
(0, _defineProperty2.default)(CatalogGridDetails, "propTypes", {
  testAutomationId: _propTypes.default.string,
  index: _propTypes.default.number.isRequired,
  colCount: _propTypes.default.number.isRequired,
  icon: _propTypes.default.string,
  color: _propTypes.default.string,
  title: _propTypes.default.string.isRequired,
  close: _propTypes.default.func,
  shouldScrollIntoView: _propTypes.default.bool
});
(0, _defineProperty2.default)(CatalogGridDetails, "defaultProps", {
  testAutomationId: 'catalogGridDetails',
  icon: null,
  color: null,
  close: null,
  shouldScrollIntoView: false
});