'use strict';

require('core-js/modules/es.symbol.js');
require('core-js/modules/es.symbol.description.js');
require('core-js/modules/es.array.concat.js');
var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var Settings = require('../../constants/Settings.js');
var SharedPropTypes = require('../../constants/SharedPropTypes.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

var prefix = Settings.settings.prefix;
var propTypes = {
  /** Card title */
  title: PropTypes__default.default.string.isRequired,
  /** Card description/content */
  description: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.node]),
  /** Bottom left  icon  */
  icon: PropTypes__default.default.oneOfType([PropTypes__default.default.shape({
    width: PropTypes__default.default.string,
    height: PropTypes__default.default.string,
    viewBox: PropTypes__default.default.string.isRequired,
    svgData: SharedPropTypes.SvgPropType.isRequired
  }), PropTypes__default.default.node]),
  /** Bottom right content for component */
  afterContent: PropTypes__default.default.node,
  /** Card display mode */
  mode: PropTypes__default.default.oneOf(['grid', 'list']),
  /** When grid type - thumbnail content */
  thumbnail: PropTypes__default.default.node,
  /** onClick card */
  onClick: PropTypes__default.default.func,
  /** Specify an optional className to be applied to the container node */
  className: PropTypes__default.default.string,
  testId: PropTypes__default.default.string
};
var defaultProps = {
  description: 'Some description',
  icon: null,
  afterContent: null,
  mode: 'grid',
  thumbnail: null,
  onClick: function onClick() {},
  className: null,
  testId: 'tile-gallery-item'
};
var TileGalleryItem = function TileGalleryItem(_ref) {
  var title = _ref.title,
    description = _ref.description,
    icon = _ref.icon,
    afterContent = _ref.afterContent,
    mode = _ref.mode,
    thumbnail = _ref.thumbnail,
    onClick = _ref.onClick,
    className = _ref.className,
    testId = _ref.testId;
  var content = /*#__PURE__*/React__default.default.createElement("div", {
    className: "content-container"
  }, icon, /*#__PURE__*/React__default.default.createElement("span", {
    className: "title-card"
  }, title), afterContent && /*#__PURE__*/React__default.default.createElement("div", {
    className: "overflow-menu",
    onClick: function onClick(evt) {
      evt.preventDefault();
      evt.stopPropagation();
    },
    role: "presentation",
    "data-testid": "".concat(testId, "-overflow-menu")
  }, afterContent));
  var tile = mode === 'grid' ? /*#__PURE__*/React__default.default.createElement("div", {
    key: "".concat(title, "-card")
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: "top-section"
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: "thumbnail"
  }, thumbnail), /*#__PURE__*/React__default.default.createElement("div", {
    className: "description-card"
  }, ! /*#__PURE__*/React__default.default.isValidElement(description) ? /*#__PURE__*/React__default.default.createElement("span", null, description) : description)), content) : /*#__PURE__*/React__default.default.createElement("div", {
    key: "".concat(title, "-card")
  }, /*#__PURE__*/React__default.default.createElement(React.Fragment, null, content, /*#__PURE__*/React__default.default.createElement("div", {
    className: "description-card"
  }, ! /*#__PURE__*/React__default.default.isValidElement(description) ? /*#__PURE__*/React__default.default.createElement("span", null, description) : description)));
  return /*#__PURE__*/React__default.default.createElement(React.Fragment, null, /*#__PURE__*/React__default.default.createElement(react.ClickableTile, {
    className: "".concat(className, " tile-gallery-item ").concat(prefix, "--tile ").concat(prefix, "--tile--clickable tile-").concat(mode === 'grid' ? 'card' : 'list', "-title"),
    key: "".concat(title, "-card-link"),
    onClick: onClick,
    "data-testid": testId
  }, tile));
};
TileGalleryItem.propTypes = propTypes;
TileGalleryItem.defaultProps = defaultProps;
TileGalleryItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TileGalleryItem",
  "props": {
    "description": {
      "defaultValue": {
        "value": "'Some description'",
        "computed": false
      },
      "description": "Card description/content",
      "type": {
        "name": "union",
        "value": [{
          "name": "string"
        }, {
          "name": "node"
        }]
      },
      "required": false
    },
    "icon": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Bottom left  icon",
      "type": {
        "name": "union",
        "value": [{
          "name": "shape",
          "value": {
            "width": {
              "name": "string",
              "required": false
            },
            "height": {
              "name": "string",
              "required": false
            },
            "viewBox": {
              "name": "string",
              "required": true
            },
            "svgData": {
              "name": "custom",
              "raw": "SvgPropType.isRequired",
              "required": true
            }
          }
        }, {
          "name": "node"
        }]
      },
      "required": false
    },
    "afterContent": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Bottom right content for component",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "mode": {
      "defaultValue": {
        "value": "'grid'",
        "computed": false
      },
      "description": "Card display mode",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'grid'",
          "computed": false
        }, {
          "value": "'list'",
          "computed": false
        }]
      },
      "required": false
    },
    "thumbnail": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "When grid type - thumbnail content",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "onClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "onClick card",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "className": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Specify an optional className to be applied to the container node",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'tile-gallery-item'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "title": {
      "description": "Card title",
      "type": {
        "name": "string"
      },
      "required": true
    }
  }
};
var TileGalleryItem$1 = TileGalleryItem;

module.exports = TileGalleryItem$1;
