import _extends from '@babel/runtime/helpers/extends';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.iterator.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.regexp.exec.js';
import 'core-js/modules/es.string.search.js';
import 'core-js/modules/web.dom-collections.iterator.js';
import React__default, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { TableToolbarSearch, Tile, SkeletonText, RadioTile } from '@carbon/react';
import classnames from 'classnames';
import SimplePagination from '../SimplePagination/SimplePagination.js';
import { settings } from '../../constants/Settings.js';
import deprecate from '../../internal/deprecate.js';
import TileGroup from './TileGroup.js';
import { Bee } from '@carbon/icons-react';

var iotPrefix = settings.iotPrefix;
var propTypes = {
  /** Is the data actively loading? */
  isLoading: PropTypes.bool,
  /** error loading the tile catalog */
  error: PropTypes.string,
  pagination: PropTypes.shape({
    pageSize: PropTypes.number,
    pageText: PropTypes.string,
    /** Gets called back with arguments (page, maxPage) */
    pageOfPagesText: PropTypes.func,
    nextPageText: PropTypes.string,
    prevPageText: PropTypes.string,
    onPage: PropTypes.func,
    /** current page number */
    page: PropTypes.number,
    totalItems: PropTypes.number
  }),
  /** We will callback with the search value */
  search: PropTypes.shape({
    placeHolderText: deprecate(PropTypes.string, '\n The prop `placeHolderText` has been deprecated in favor `placeholder`'),
    placeholder: PropTypes.string,
    noMatchesFoundText: PropTypes.string,
    /** current search value */
    value: PropTypes.string,
    onSearch: PropTypes.func
  }),
  /** form id */
  id: PropTypes.string.isRequired,
  /** title displayed above the catalog */
  title: PropTypes.node,
  /** tiles describes what to render */
  tiles: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    /**  the values field is searched by the search widget */
    values: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
    /** renderContent is called back with the full value object and id to render */
    renderContent: PropTypes.func,
    className: PropTypes.string
  })).isRequired,
  /** Callbacks */
  onSelection: PropTypes.func.isRequired,
  /** currently selected tile id */
  selectedTileId: PropTypes.string,
  testId: PropTypes.string
};
var defaultProps = {
  isLoading: false,
  title: null,
  error: null,
  pagination: null,
  search: null,
  selectedTileId: null,
  testId: 'tile-catalog'
};

/**
 * Renders a searchable and pageable catalog of RadioTiles from carbon. Couldn't reuse the TileGroup component from Carbon due to this limitation.
 * https://github.com/IBM/carbon-components-react/issues/1999
 *
 */
var TileCatalog = function TileCatalog(_ref) {
  var _search$placeHolderTe, _search$placeHolderTe2;
  var id = _ref.id,
    className = _ref.className,
    isLoading = _ref.isLoading,
    error = _ref.error,
    search = _ref.search,
    pagination = _ref.pagination,
    tiles = _ref.tiles,
    onSelection = _ref.onSelection,
    selectedTileId = _ref.selectedTileId,
    testId = _ref.testId;
  var searchState = search ? search.value : '';
  var handleSearch = search && search.onSearch;
  var pageSize = pagination && pagination.pageSize ? pagination.pageSize : 10;
  var totalTiles = pagination && pagination.totalItems ? pagination.totalItems : 10;
  return /*#__PURE__*/React__default.createElement("div", {
    "data-testid": testId,
    className: classnames(className, "".concat(iotPrefix, "--tile-catalog"))
  }, /*#__PURE__*/React__default.createElement("div", {
    "data-testid": "".concat(testId, "-header"),
    className: "".concat(iotPrefix, "--tile-catalog--header")
  }, search && (search.placeHolderText || search.placeholder) ? /*#__PURE__*/React__default.createElement(TableToolbarSearch, {
    size: "lg",
    value: searchState,
    labelText: (_search$placeHolderTe = search.placeHolderText) !== null && _search$placeHolderTe !== void 0 ? _search$placeHolderTe : search.placeholder,
    placeholder: (_search$placeHolderTe2 = search.placeHolderText) !== null && _search$placeHolderTe2 !== void 0 ? _search$placeHolderTe2 : search.placeholder,
    onChange: handleSearch,
    id: "".concat(id, "-searchbox"),
    "data-testid": "".concat(testId, "-search-input")
  }) : null), isLoading ?
  /*#__PURE__*/
  // generate empty tiles for first page
  React__default.createElement(TileGroup, {
    testId: "".concat(testId, "-loading-group"),
    tiles: _toConsumableArray(Array(pageSize)).map(function (val, index) {
      return /*#__PURE__*/React__default.createElement(Tile, {
        className: "".concat(iotPrefix, "--tile-catalog--empty-tile"),
        key: "emptytile-".concat(index)
      }, /*#__PURE__*/React__default.createElement(SkeletonText, null));
    }),
    totalTiles: totalTiles
  }) : tiles.length > 0 ? /*#__PURE__*/React__default.createElement(TileGroup, {
    testId: "".concat(testId, "-group"),
    tiles: tiles.map(function (tile) {
      return /*#__PURE__*/React__default.createElement(RadioTile, {
        className: tile.className,
        key: tile.id,
        id: tile.id,
        value: tile.id,
        name: id,
        checked: selectedTileId === tile.id,
        onChange: onSelection,
        "data-testid": "".concat(testId, "-radio-tile-").concat(tile.id)
      }, tile.renderContent ? tile.renderContent({
        values: tile.values,
        id: tile.id
      }) : tile.value);
    })
  }) : /*#__PURE__*/React__default.createElement(Tile, {
    "data-testid": "".concat(testId, "-empty"),
    className: "".concat(iotPrefix, "--tile-catalog--empty-tile")
  }, error || /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Bee, {
    size: 32
  }), /*#__PURE__*/React__default.createElement("p", null, search && search.noMatchesFoundText || 'No matches found'))), !isLoading && tiles.length > 0 && !error && pagination ? /*#__PURE__*/React__default.createElement(SimplePagination, _extends({}, pagination, {
    maxPage: Math.ceil(totalTiles / pageSize)
    // TODO: pass testId in v3 to override defaults
    // testId={`${testId}-pagination`}
  })) : null);
};
TileCatalog.propTypes = propTypes;
TileCatalog.defaultProps = defaultProps;
TileCatalog.__docgenInfo = {
  "description": "Renders a searchable and pageable catalog of RadioTiles from carbon. Couldn't reuse the TileGroup component from Carbon due to this limitation.\nhttps://github.com/IBM/carbon-components-react/issues/1999",
  "methods": [],
  "displayName": "TileCatalog",
  "props": {
    "isLoading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Is the data actively loading?",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "title": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "title displayed above the catalog",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "error": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "error loading the tile catalog",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "pagination": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "pageSize": {
            "name": "number",
            "required": false
          },
          "pageText": {
            "name": "string",
            "required": false
          },
          "pageOfPagesText": {
            "name": "func",
            "description": "Gets called back with arguments (page, maxPage)",
            "required": false
          },
          "nextPageText": {
            "name": "string",
            "required": false
          },
          "prevPageText": {
            "name": "string",
            "required": false
          },
          "onPage": {
            "name": "func",
            "required": false
          },
          "page": {
            "name": "number",
            "description": "current page number",
            "required": false
          },
          "totalItems": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false
    },
    "search": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "We will callback with the search value",
      "type": {
        "name": "shape",
        "value": {
          "placeHolderText": {
            "name": "custom",
            "raw": "deprecate(\n  PropTypes.string,\n  '\\n The prop `placeHolderText` has been deprecated in favor `placeholder`'\n)",
            "required": false
          },
          "placeholder": {
            "name": "string",
            "required": false
          },
          "noMatchesFoundText": {
            "name": "string",
            "required": false
          },
          "value": {
            "name": "string",
            "description": "current search value",
            "required": false
          },
          "onSearch": {
            "name": "func",
            "required": false
          }
        }
      },
      "required": false
    },
    "selectedTileId": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "currently selected tile id",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'tile-catalog'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "id": {
      "description": "form id",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "tiles": {
      "description": "tiles describes what to render",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": true
            },
            "values": {
              "name": "union",
              "value": [{
                "name": "object"
              }, {
                "name": "string"
              }],
              "description": "the values field is searched by the search widget",
              "required": true
            },
            "renderContent": {
              "name": "func",
              "description": "renderContent is called back with the full value object and id to render",
              "required": false
            },
            "className": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": true
    },
    "onSelection": {
      "description": "Callbacks",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var TileCatalog$1 = TileCatalog;

export { TileCatalog$1 as default, propTypes };
