import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import escapeRegExp from '../../node_modules/lodash-es/escapeRegExp.js';
import get from '../../node_modules/lodash-es/get.js';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.symbol.description.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.filter.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.regexp.constructor.js';
import 'core-js/modules/es.regexp.exec.js';
import 'core-js/modules/es.regexp.to-string.js';
import React__default, { useState } from 'react';
import PropTypes from 'prop-types';
import Button from '../Button/Button.js';
import { SvgPropType } from '../../constants/SharedPropTypes.js';
import TileGallery from './TileGallery.js';
import TileGallerySection from './TileGallerySection.js';
import TileGalleryItem from './TileGalleryItem.js';
import TileGallerySearch from './TileGallerySearch.js';
import TileGalleryViewSwitcher from './TileGalleryViewSwitcher.js';
import PageTitleBar from '../PageTitleBar/PageTitleBar.js';

var ButtonKinds = ['primary', 'secondary', 'tertiary', 'ghost', 'danger'];
var propTypes = {
  /** Title of the page  */
  title: PropTypes.string.isRequired,
  /** Details about what the page shows */
  description: PropTypes.node,
  /** Has simple search capability */
  hasSearch: PropTypes.bool,
  /** Has toggle grid/list component */
  hasSwitcher: PropTypes.bool,
  /** Has button */
  hasButton: PropTypes.bool,
  /** i18n strings */
  i18n: PropTypes.shape({
    /** i18n strings for seach capability */
    searchIconDescription: PropTypes.string,
    searchPlaceHolderText: PropTypes.string,
    searchCloseButtonText: PropTypes.string,
    /** i18n strings for grid/list capability */
    listText: PropTypes.string,
    gridText: PropTypes.string,
    descriptionMoreInfo: PropTypes.string,
    arrowIconDescription: PropTypes.string
  }),
  /** Custom className for component */
  className: PropTypes.string,
  galleryData: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    sectionTitle: PropTypes.string,
    galleryItems: PropTypes.arrayOf(PropTypes.shape({
      title: PropTypes.string.isRequired,
      description: PropTypes.string,
      moreInfoLink: PropTypes.string,
      onClick: PropTypes.func,
      icon: PropTypes.oneOfType([PropTypes.shape({
        width: PropTypes.string,
        height: PropTypes.string,
        viewBox: PropTypes.string.isRequired,
        svgData: SvgPropType.isRequired
      }), PropTypes.node]),
      afterContent: PropTypes.node,
      thumbnail: PropTypes.node,
      href: PropTypes.string
    }))
  })).isRequired,
  classNameGalleryItem: PropTypes.string,
  /** Is button disabled */
  isButtonDisabled: PropTypes.bool,
  /** Custom className for Button component */
  buttonClassName: PropTypes.string,
  /** Button kind */
  buttonKind: PropTypes.oneOf(ButtonKinds),
  /** Button content */
  buttonText: PropTypes.string,
  testId: PropTypes.string
};
var defaultProps = {
  description: null,
  hasSearch: false,
  hasSwitcher: false,
  hasButton: false,
  i18n: {
    searchIconDescription: 'Search',
    searchPlaceHolderText: 'Search for something',
    searchCloseButtonText: 'Clear search',
    listText: 'List',
    gridText: 'Grid',
    arrowIconDescription: 'Expand/Collapse'
  },
  className: null,
  classNameGalleryItem: null,
  isButtonDisabled: false,
  buttonClassName: null,
  buttonKind: 'primary',
  buttonText: null,
  testId: 'stateful-tile-gallery'
};
var doesGalleryItemMatch = function doesGalleryItemMatch(galleryItem, searchString) {
  var searchRegexp = new RegExp(escapeRegExp(searchString) || '', 'i');
  return searchRegexp.test(galleryItem.title) || searchRegexp.test(galleryItem.description);
};
var StatefulTileGallery = function StatefulTileGallery(_ref) {
  var title = _ref.title,
    description = _ref.description,
    hasSearch = _ref.hasSearch,
    hasSwitcher = _ref.hasSwitcher,
    hasButton = _ref.hasButton,
    i18n = _ref.i18n,
    className = _ref.className,
    galleryData = _ref.galleryData,
    classNameGalleryItem = _ref.classNameGalleryItem,
    isButtonDisabled = _ref.isButtonDisabled,
    buttonClassName = _ref.buttonClassName,
    buttonKind = _ref.buttonKind,
    buttonText = _ref.buttonText,
    testId = _ref.testId;
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    search = _useState2[0],
    setSearch = _useState2[1];
  var _useState3 = useState(true),
    _useState4 = _slicedToArray(_useState3, 2),
    thumbnails = _useState4[0],
    setThumbnails = _useState4[1];
  return /*#__PURE__*/React__default.createElement(PageTitleBar, {
    testId: "".concat(testId, "-page-title-bar"),
    title: title,
    description: description,
    className: className,
    extraContent: /*#__PURE__*/React__default.createElement("div", {
      "data-testid": "".concat(testId, "-extra-content"),
      className: "extra-content"
    }, hasSearch ? /*#__PURE__*/React__default.createElement(TileGallerySearch, {
      searchValue: search,
      onChange: function onChange(event) {
        return setSearch(get(event, 'currentTarget.value'));
      },
      width: "305px",
      i18n: {
        iconDescription: i18n.searchIconDescription,
        placeHolderText: i18n.searchPlaceHolderText,
        closeButtonText: i18n.searchCloseButtonText
      },
      testId: "".concat(testId, "-search-input")
    }) : null, hasSwitcher ? /*#__PURE__*/React__default.createElement(TileGalleryViewSwitcher, {
      onChange: function onChange(event) {
        return setThumbnails(get(event, 'name') !== 'list');
      },
      selectedIndex: thumbnails ? 1 : 0,
      i18n: i18n,
      testId: "".concat(testId, "-switcher")
    }) : null, hasButton ? /*#__PURE__*/React__default.createElement(Button, {
      disabled: isButtonDisabled,
      className: buttonClassName,
      kind: buttonKind
    }, buttonText) : null),
    content: /*#__PURE__*/React__default.createElement(TileGallery, {
      testId: testId
    }, galleryData.map(function (item) {
      var items = item.galleryItems.filter(function (galleryItem) {
        return doesGalleryItemMatch(galleryItem, search);
      });
      return /*#__PURE__*/React__default.createElement(TileGallerySection, {
        key: item.id,
        title: item.sectionTitle,
        i18n: i18n,
        testId: "".concat(testId, "-section-").concat(item.id)
      }, items.map(function (galleryItem, i) {
        return /*#__PURE__*/React__default.createElement(TileGalleryItem, {
          key: "item-".concat(galleryItem.title, "-").concat(Math.random()),
          className: classNameGalleryItem,
          mode: thumbnails ? 'grid' : 'list',
          title: galleryItem.title,
          description: galleryItem.description,
          onClick: galleryItem.onClick,
          moreInfoLink: galleryItem.moreInfoLink,
          icon: galleryItem.icon,
          afterContent: galleryItem.afterContent,
          thumbnail: galleryItem.thumbnail,
          href: galleryItem.href,
          testId: "".concat(testId, "-section-").concat(item.id, "-item-").concat(i)
        });
      }));
    }))
  });
};
StatefulTileGallery.propTypes = propTypes;
StatefulTileGallery.defaultProps = defaultProps;
StatefulTileGallery.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StatefulTileGallery",
  "props": {
    "description": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Details about what the page shows",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "hasSearch": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Has simple search capability",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "hasSwitcher": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Has toggle grid/list component",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "hasButton": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Has button",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  searchIconDescription: 'Search',\n  searchPlaceHolderText: 'Search for something',\n  searchCloseButtonText: 'Clear search',\n  listText: 'List',\n  gridText: 'Grid',\n  arrowIconDescription: 'Expand/Collapse',\n}",
        "computed": false
      },
      "description": "i18n strings",
      "type": {
        "name": "shape",
        "value": {
          "searchIconDescription": {
            "name": "string",
            "description": "i18n strings for seach capability",
            "required": false
          },
          "searchPlaceHolderText": {
            "name": "string",
            "required": false
          },
          "searchCloseButtonText": {
            "name": "string",
            "required": false
          },
          "listText": {
            "name": "string",
            "description": "i18n strings for grid/list capability",
            "required": false
          },
          "gridText": {
            "name": "string",
            "required": false
          },
          "descriptionMoreInfo": {
            "name": "string",
            "required": false
          },
          "arrowIconDescription": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "className": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Custom className for component",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "classNameGalleryItem": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "isButtonDisabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Is button disabled",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "buttonClassName": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Custom className for Button component",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "buttonKind": {
      "defaultValue": {
        "value": "'primary'",
        "computed": false
      },
      "description": "Button kind",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'primary'",
          "computed": false
        }, {
          "value": "'secondary'",
          "computed": false
        }, {
          "value": "'tertiary'",
          "computed": false
        }, {
          "value": "'ghost'",
          "computed": false
        }, {
          "value": "'danger'",
          "computed": false
        }]
      },
      "required": false
    },
    "buttonText": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Button content",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'stateful-tile-gallery'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "title": {
      "description": "Title of the page",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "galleryData": {
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": true
            },
            "sectionTitle": {
              "name": "string",
              "required": false
            },
            "galleryItems": {
              "name": "arrayOf",
              "value": {
                "name": "shape",
                "value": {
                  "title": {
                    "name": "string",
                    "required": true
                  },
                  "description": {
                    "name": "string",
                    "required": false
                  },
                  "moreInfoLink": {
                    "name": "string",
                    "required": false
                  },
                  "onClick": {
                    "name": "func",
                    "required": false
                  },
                  "icon": {
                    "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": {
                    "name": "node",
                    "required": false
                  },
                  "thumbnail": {
                    "name": "node",
                    "required": false
                  },
                  "href": {
                    "name": "string",
                    "required": false
                  }
                }
              },
              "required": false
            }
          }
        }
      },
      "required": true
    }
  }
};
var StatefulTileGallery$1 = StatefulTileGallery;

export { StatefulTileGallery$1 as default };
