import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import PropTypes from 'prop-types';
import { CatalogItemIcon } from './CatalogItemIcon';
import { Icon } from '../Icon';
import { FlexBlock } from '../flexBlock/FlexBlock';
import { scrollEelementIntoView } from '../../utils/functions';
export var CatalogGridDetails =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(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;

    _defineProperty(_assertThisInitialized(_this), "ref", React.createRef());

    return _this;
  }

  var _proto = CatalogGridDetails.prototype;

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

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

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

    if (React.isValidElement(icon)) {
      return icon;
    }

    return React.createElement(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.createElement("div", {
      ref: this.ref,
      className: "rc-catalog-grid-details",
      "data-test-automation-id": testAutomationId
    }, React.createElement("div", {
      style: {
        left: 100 / colCount * (index % colCount + 0.5) + "%"
      },
      className: "rc-catalog-grid-details__tip"
    }), React.createElement(FlexBlock, {
      justify: FlexBlock.SPACE_BETWEEN,
      className: "rc-catalog-grid-details__header"
    }, React.createElement(FlexBlock, {
      align: FlexBlock.CENTER
    }, this.renderIcon(), React.createElement("div", {
      className: "rc-catalog-grid-details__title",
      "data-test-automation-id": "title"
    }, title)), React.createElement("button", {
      onClick: close,
      className: "rc-catalog-grid-details__close",
      "data-test-automation-id": "closeButton"
    }, React.createElement(Icon, {
      name: "close"
    }))), React.createElement("div", {
      "data-test-automation-id": "gridDetailsChildren"
    }, children));
  };

  return CatalogGridDetails;
}(React.Component);

_defineProperty(CatalogGridDetails, "propTypes", {
  testAutomationId: PropTypes.string,
  index: PropTypes.number.isRequired,
  colCount: PropTypes.number.isRequired,
  icon: PropTypes.string,
  color: PropTypes.string,
  title: PropTypes.string.isRequired,
  close: PropTypes.func,
  shouldScrollIntoView: PropTypes.bool
});

_defineProperty(CatalogGridDetails, "defaultProps", {
  testAutomationId: 'catalogGridDetails',
  icon: null,
  color: null,
  close: null,
  shouldScrollIntoView: false
});