import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.map.js';
import React__default, { useState } from 'react';
import { TableToolbarSearch, Select, SelectItem, Tile, SkeletonText } from '@carbon/react';
import PropTypes from 'prop-types';
import { settings } from '../../constants/Settings.js';
import TilePagination from './TilePagination/TilePagination.js';
import { Bee } from '@carbon/icons-react';

var iotPrefix = settings.iotPrefix;
var propTypes = {
  /** Title for the product */
  title: PropTypes.string,
  /** Min width of each tile if no col/row nums are specified */
  minTileWidth: PropTypes.string,
  /** Number of columns to be rendered per page */
  numColumns: PropTypes.number,
  /** Number of rows to be rendered per page */
  numRows: PropTypes.number,
  /** A collection of tiles to to rendered  */
  tiles: PropTypes.arrayOf(PropTypes.node),
  /** Set to true if a search is needed */
  hasSearch: PropTypes.bool,
  /** Call back function of search */
  onSearch: PropTypes.func,
  /** Set to true if sorting is needed */
  hasSort: PropTypes.bool,
  /** Call back function of sort */
  onSort: PropTypes.func,
  /** Options in sort */
  sortOptions: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    text: PropTypes.string
  })),
  /** Default option in sort */
  selectedSortOption: PropTypes.string,
  /** Loading state */
  isLoading: PropTypes.bool,
  /** Error state */
  error: PropTypes.string,
  /** Set to true if filter is needed */
  i18n: PropTypes.shape({
    placeHolderText: PropTypes.string,
    error: PropTypes.string,
    searchPlaceHolderText: PropTypes.string
  }),
  testId: PropTypes.string
};
var defaultProps = {
  title: '',
  hasSort: false,
  hasSearch: false,
  onSearch: function onSearch() {},
  onSort: function onSort() {},
  sortOptions: [],
  selectedSortOption: '',
  isLoading: false,
  error: '',
  minTileWidth: null,
  numColumns: 3,
  numRows: 3,
  i18n: {
    searchPlaceHolderText: 'Enter a value',
    error: 'An error has occurred. Please make sure your catalog has content.'
  },
  tiles: [],
  testId: 'tile-catalog-new'
};
var TileCatalogNew = function TileCatalogNew(_ref) {
  var title = _ref.title,
    minTileWidth = _ref.minTileWidth,
    numColumns = _ref.numColumns,
    numRows = _ref.numRows,
    tiles = _ref.tiles,
    hasSearch = _ref.hasSearch,
    onSearch = _ref.onSearch,
    hasSort = _ref.hasSort,
    onSort = _ref.onSort,
    sortOptions = _ref.sortOptions,
    selectedSortOption = _ref.selectedSortOption,
    isLoading = _ref.isLoading,
    error = _ref.error,
    i18n = _ref.i18n,
    className = _ref.className,
    testId = _ref.testId;
  var _useState = useState(1),
    _useState2 = _slicedToArray(_useState, 2),
    currentPage = _useState2[0],
    setCurrentPage = _useState2[1];

  // determine how many tiles to render per page
  var isInCurrentPageRange = function isInCurrentPageRange(i) {
    return i < numColumns * numRows * currentPage && i >= numColumns * numRows * (currentPage - 1);
  };
  var renderGrid = function renderGrid() {
    return /*#__PURE__*/React__default.createElement("div", {
      "data-testid": "".concat(testId, "-grid"),
      className: "".concat(iotPrefix, "--tile-catalog--grid-container"),
      style: {
        '--columns': minTileWidth ? // if the user specifies a minTileWidth, we will render all tiles on one responsive page
        "repeat(auto-fill, minmax(".concat(minTileWidth, ", 1fr))") : // if the user specifies numColumns we will render exactly that number
        "repeat(".concat(numColumns, ", 1fr)")
      }
    }, tiles.map(function (tile, i) {
      return isLoading ? i < 4 ?
      /*#__PURE__*/
      // limit the amount of SkeletonText to render
      React__default.createElement(SkeletonText, {
        key: "".concat(iotPrefix, "--tile-catalog--grid-").concat(i)
      }) : null : minTileWidth || isInCurrentPageRange(i) ? /*#__PURE__*/React__default.createElement("div", {
        key: "".concat(iotPrefix, "--tile-catalog--grid-").concat(i)
      }, tile) : null;
    }));
  };

  // only render pagination if there is no minTileWidth and there are more tiles than can fit in
  // the bounds of our specified number of rows and columns
  var hasPagination = !minTileWidth && !isLoading ? Math.ceil(tiles.length / (numRows * numColumns)) > 1 : null;
  return /*#__PURE__*/React__default.createElement("div", {
    "data-testid": testId,
    className: className
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--tile-catalog--canvas-container")
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--tile-catalog--tile-canvas")
  }, /*#__PURE__*/React__default.createElement("div", {
    "data-testid": "".concat(testId, "-header"),
    className: "".concat(iotPrefix, "--tile-catalog--tile-canvas--header")
  }, title ? /*#__PURE__*/React__default.createElement("div", {
    "data-testid": "".concat(testId, "-title"),
    className: "".concat(iotPrefix, "--tile-catalog--tile-canvas--header--title")
  }, title) : null, hasSearch ? /*#__PURE__*/React__default.createElement(TableToolbarSearch, {
    placeholder: i18n.searchPlaceHolderText,
    onChange: onSearch,
    size: "md",
    className: "".concat(iotPrefix, "--tile-catalog--tile-canvas--header--search"),
    "data-testid": "".concat(testId, "-search-input")
  }) : null, /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--tile-catalog--tile-canvas--header--select")
  }, hasSort ? /*#__PURE__*/React__default.createElement(Select, {
    id: "".concat(iotPrefix, "--tile-catalog--tile-canvas--header--select"),
    onChange: function onChange(evt) {
      return onSort(evt.target.value);
    },
    defaultValue: selectedSortOption,
    labelText: "",
    "data-testid": "".concat(testId, "-sort-select"),
    role: "listbox"
  }, sortOptions.map(function (option) {
    return /*#__PURE__*/React__default.createElement(SelectItem, {
      key: option.id,
      text: option.text,
      value: option.id
    });
  })) : null)), tiles.length > 0 && !error ? /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--tile-catalog--tile-canvas--content")
  }, renderGrid()) : /*#__PURE__*/React__default.createElement(Tile, {
    "data-testid": "".concat(testId, "-empty"),
    className: "".concat(iotPrefix, "--tile-catalog--empty-tile")
  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Bee, {
    size: 32
  }), /*#__PURE__*/React__default.createElement("p", null, error || i18n.error))), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--tile-catalog--tile-canvas--bottom")
  }, hasPagination ? /*#__PURE__*/React__default.createElement(TilePagination, {
    page: currentPage,
    numPages: Math.ceil(tiles.length / (numRows * numColumns)),
    onChange: function onChange(newPage) {
      return setCurrentPage(newPage);
    },
    testId: "".concat(testId, "-pagination")
  }) : null))));
};
TileCatalogNew.propTypes = propTypes;
TileCatalogNew.defaultProps = defaultProps;
TileCatalogNew.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TileCatalogNew",
  "props": {
    "title": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "Title for the product",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "hasSort": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Set to true if sorting is needed",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "hasSearch": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Set to true if a search is needed",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "onSearch": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "Call back function of search",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onSort": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "Call back function of sort",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "sortOptions": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "Options in sort",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": false
            },
            "text": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "selectedSortOption": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "Default option in sort",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "isLoading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Loading state",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "error": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "Error state",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "minTileWidth": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Min width of each tile if no col/row nums are specified",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "numColumns": {
      "defaultValue": {
        "value": "3",
        "computed": false
      },
      "description": "Number of columns to be rendered per page",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "numRows": {
      "defaultValue": {
        "value": "3",
        "computed": false
      },
      "description": "Number of rows to be rendered per page",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  searchPlaceHolderText: 'Enter a value',\n  error: 'An error has occurred. Please make sure your catalog has content.',\n}",
        "computed": false
      },
      "description": "Set to true if filter is needed",
      "type": {
        "name": "shape",
        "value": {
          "placeHolderText": {
            "name": "string",
            "required": false
          },
          "error": {
            "name": "string",
            "required": false
          },
          "searchPlaceHolderText": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "tiles": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "A collection of tiles to to rendered",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "node"
        }
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'tile-catalog-new'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    }
  }
};
var TileCatalogNew$1 = TileCatalogNew;

export { TileCatalogNew$1 as default };
