'use strict';

var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var colors = require('@carbon/colors');

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

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

var propTypes = {
  /** i18n strings */
  i18n: PropTypes__default.default.shape({
    iconDescription: PropTypes__default.default.string,
    placeHolderText: PropTypes__default.default.string,
    closeButtonText: PropTypes__default.default.string
  }),
  searchValue: PropTypes__default.default.string,
  onChange: PropTypes__default.default.func,
  width: PropTypes__default.default.string,
  testId: PropTypes__default.default.string
};
var defaultProps = {
  i18n: {
    iconDescription: 'Search',
    placeHolderText: '',
    closeButtonText: 'Clear search input'
  },
  searchValue: '',
  onChange: function onChange() {},
  width: '304px',
  testId: 'tile-gallery-search-input'
};
var TileGallerySearch = function TileGallerySearch(_ref) {
  var i18n = _ref.i18n,
    searchValue = _ref.searchValue,
    _onChange = _ref.onChange,
    width = _ref.width,
    testId = _ref.testId;
  return /*#__PURE__*/React__default.default.createElement("div", null, /*#__PURE__*/React__default.default.createElement(react.Search, {
    style: {
      background: colors.white,
      width: width
    },
    value: searchValue,
    labelText: i18n.iconDescription,
    placeholder: i18n.placeHolderText,
    onChange: function onChange(event) {
      return _onChange(event);
    },
    closeButtonLabelText: i18n.closeButtonText,
    id: "gallery-search",
    "data-testid": testId
  }));
};
TileGallerySearch.propTypes = propTypes;
TileGallerySearch.defaultProps = defaultProps;
TileGallerySearch.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TileGallerySearch",
  "props": {
    "i18n": {
      "defaultValue": {
        "value": "{\n  iconDescription: 'Search',\n  placeHolderText: '',\n  closeButtonText: 'Clear search input',\n}",
        "computed": false
      },
      "description": "i18n strings",
      "type": {
        "name": "shape",
        "value": {
          "iconDescription": {
            "name": "string",
            "required": false
          },
          "placeHolderText": {
            "name": "string",
            "required": false
          },
          "closeButtonText": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "searchValue": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "width": {
      "defaultValue": {
        "value": "'304px'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'tile-gallery-search-input'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    }
  }
};
var TileGallerySearch$1 = TileGallerySearch;

module.exports = TileGallerySearch$1;
