import _extends from '@babel/runtime/helpers/extends';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import isEqual from '../../node_modules/lodash-es/isEqual.js';
import _omit from '../../node_modules/lodash-es/omit.js';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.filter.js';
import 'core-js/modules/es.array.includes.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.function.name.js';
import 'core-js/modules/es.object.get-own-property-descriptor.js';
import 'core-js/modules/es.object.get-own-property-descriptors.js';
import 'core-js/modules/es.object.keys.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.string.includes.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import React__default, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Modal, Layer, Search, ContentSwitcher } from '@carbon/react';
import { settings } from '../../constants/Settings.js';
import IconSwitch from '../IconSwitch/IconSwitch.js';
import ComposedModal, { ComposedModalPropTypes } from '../ComposedModal/ComposedModal.js';
import { usePrevious } from '../../hooks/usePrevious.js';
import ImageTile from './ImageTile.js';
import { Grid, List } from '@carbon/icons-react';

var _excluded = ["className", "content", "defaultView", "gridButtonText", "instructionText", "listButtonText", "modalCloseIconDescriptionText", "modalLabelText", "modalTitleText", "deleteLabelText", "deleteModalLabelText", "deleteModalTitleText", "modalPrimaryButtonLabelText", "modalSecondaryButtonLabelText", "onSubmit", "onClose", "searchPlaceHolderText", "searchProperty", "onDelete", "footer", "testId"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var GRID = 'grid';
var LIST = 'list';
var iotPrefix = settings.iotPrefix,
  prefix = settings.prefix;
var ImagePropTypes = PropTypes.arrayOf(PropTypes.shape({
  id: PropTypes.string.isRequired,
  src: PropTypes.string.isRequired,
  /** The alt attribute of the image element */
  alt: PropTypes.string,
  /** Title to be shown above image. Defaults to file name from src. */
  title: PropTypes.string
}));
var propTypes = _objectSpread(_objectSpread({}, ComposedModalPropTypes), {}, {
  // eslint-disable-line react/forbid-foreign-prop-types
  /** Classname to be added to the root node */
  className: PropTypes.string,
  /** Array of the images that should be shown */
  content: ImagePropTypes,
  /** The name of the view to be selected by default */
  defaultView: PropTypes.oneOf([GRID, LIST]),
  /** The footer prop of the ComposedModalPropTypes */
  footer: ComposedModalPropTypes.footer,
  /** Callback called with selected image props when modal submit button is pressed. */
  onSubmit: PropTypes.func.isRequired,
  /** Callback called when modal close icon or cancel button is pressed */
  onClose: PropTypes.func.isRequired,
  /** The image property to be included in the search */
  searchProperty: PropTypes.string,
  /** optional method to allow deletion of the images in the gallery */
  onDelete: PropTypes.func,
  /** The text of the grid button in the grid list toggle */
  gridButtonText: PropTypes.string,
  /** The text with instructions showing above the search */
  instructionText: PropTypes.string,
  /** The text of the list button in the grid list toggle */
  listButtonText: PropTypes.string,
  modalCloseIconDescriptionText: PropTypes.string,
  /** The small label text of the modal */
  modalLabelText: PropTypes.string,
  /** The large title text of the modal */
  modalTitleText: PropTypes.string,
  /** The primary button (select) text of the modal */
  modalPrimaryButtonLabelText: PropTypes.string,
  deleteLabelText: PropTypes.string,
  deleteModalLabelText: PropTypes.string,
  /** callback function that passes the image name and returns the title text for the delete */
  deleteModalTitleText: PropTypes.func,
  /** The secondary button (cancel) text of the modal */
  modalSecondaryButtonLabelText: PropTypes.string,
  /** The text for the search input placeHolder */
  searchPlaceHolderText: PropTypes.string,
  testId: PropTypes.string
});
var defaultProps = {
  className: '',
  content: [],
  defaultView: GRID,
  footer: {},
  searchProperty: 'id',
  onDelete: null,
  gridButtonText: 'Grid',
  instructionText: 'Select the image that you want to display on this card.',
  listButtonText: 'List',
  modalLabelText: 'New image card',
  modalTitleText: 'Image gallery',
  modalPrimaryButtonLabelText: 'Select',
  deleteLabelText: 'Delete',
  deleteModalLabelText: 'Delete image',
  deleteModalTitleText: function deleteModalTitleText(image) {
    return "Are you sure you want to delete the image: ".concat(image, "?");
  },
  modalSecondaryButtonLabelText: 'Cancel',
  modalCloseIconDescriptionText: 'Close',
  searchPlaceHolderText: 'Search image by file name',
  testId: 'image-gallery-modal'
};
var ImageGalleryModal = function ImageGalleryModal(_ref) {
  var className = _ref.className,
    content = _ref.content,
    defaultView = _ref.defaultView,
    gridButtonText = _ref.gridButtonText,
    instructionText = _ref.instructionText,
    listButtonText = _ref.listButtonText,
    modalCloseIconDescriptionText = _ref.modalCloseIconDescriptionText,
    modalLabelText = _ref.modalLabelText,
    modalTitleText = _ref.modalTitleText,
    deleteLabelText = _ref.deleteLabelText;
    _ref.deleteModalLabelText;
    var deleteModalTitleText = _ref.deleteModalTitleText,
    modalPrimaryButtonLabelText = _ref.modalPrimaryButtonLabelText,
    modalSecondaryButtonLabelText = _ref.modalSecondaryButtonLabelText,
    _onSubmit = _ref.onSubmit,
    onClose = _ref.onClose,
    searchPlaceHolderText = _ref.searchPlaceHolderText,
    searchProperty = _ref.searchProperty,
    onDelete = _ref.onDelete,
    footer = _ref.footer,
    testId = _ref.testId,
    composedModalProps = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(defaultView),
    _useState2 = _slicedToArray(_useState, 2),
    activeView = _useState2[0],
    setActiveView = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    selectedImage = _useState4[0],
    setSelectedImage = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    isDeleteWarningModalOpen = _useState6[0],
    setIsDeleteWarningModalOpen = _useState6[1];
  var _useState7 = useState(content),
    _useState8 = _slicedToArray(_useState7, 2),
    filteredContent = _useState8[0],
    setFilteredContent = _useState8[1];
  var previousContent = usePrevious(content);
  // Need to support lazy loaded content
  useEffect(function () {
    if (!isEqual(content, previousContent)) {
      setFilteredContent(content);
    }
  }, [content, previousContent]);
  var _toggleImageSelection = function toggleImageSelection(imageProps) {
    setSelectedImage(function (currentSelected) {
      return (currentSelected === null || currentSelected === void 0 ? void 0 : currentSelected.id) === imageProps.id ? undefined : imageProps;
    });
  };
  var filterContent = function filterContent(evt) {
    var searchTerm = evt.currentTarget.value.toLowerCase();
    var filtered = content.filter(function (imageProps) {
      var _imageProps$searchPro;
      var text = ((_imageProps$searchPro = imageProps[searchProperty]) !== null && _imageProps$searchPro !== void 0 ? _imageProps$searchPro : '').toLowerCase();
      return text.includes(searchTerm);
    });
    setFilteredContent(filtered);
    setSelectedImage(undefined);
  };
  var handleDelete = function handleDelete() {
    onDelete(selectedImage.id);
    setIsDeleteWarningModalOpen(false);
  };
  var baseClass = "".concat(iotPrefix, "--image-gallery-modal");
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isDeleteWarningModalOpen ?
  /*#__PURE__*/
  // warning modal to show first
  React__default.createElement(Modal, {
    className: "".concat(baseClass, "--warning-modal"),
    open: isDeleteWarningModalOpen,
    danger: true,
    primaryButtonText: deleteLabelText,
    secondaryButtonText: modalSecondaryButtonLabelText,
    modalHeading: deleteModalTitleText(selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.id),
    size: "xs",
    closeButtonLabel: modalCloseIconDescriptionText,
    onRequestClose: function onRequestClose() {
      return setIsDeleteWarningModalOpen(false);
    },
    onRequestSubmit: handleDelete,
    "data-testid": "".concat(testId, "-warning-modal")
  }) : null, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({
    selectorPrimaryFocus: ".".concat(prefix, "--modal-header"),
    type: "normal",
    className: classnames(className, baseClass),
    footer: _objectSpread({
      isPrimaryButtonDisabled: !selectedImage,
      primaryButtonLabel: modalPrimaryButtonLabelText,
      secondaryButtonLabel: modalSecondaryButtonLabelText
    }, footer),
    header: {
      label: modalLabelText,
      title: modalTitleText
    },
    isLarge: true,
    iconDescription: modalCloseIconDescriptionText,
    onClose: onClose,
    onSubmit: function onSubmit() {
      // title only makes sense in the modal selector, not in the image card
      _onSubmit(_omit(selectedImage, 'title'));
    },
    testId: testId
  }, composedModalProps), /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClass, "__top-section")
  }, /*#__PURE__*/React__default.createElement("p", {
    className: "".concat(baseClass, "__instruction-text"),
    alt: instructionText
  }, instructionText), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClass, "__search-list-view-container")
  }, /*#__PURE__*/React__default.createElement(Search, {
    id: "".concat(baseClass, "--search"),
    onChange: filterContent,
    labelText: "",
    light: true,
    placeholder: searchPlaceHolderText,
    "data-testid": "".concat(testId, "-search-input")
  }), /*#__PURE__*/React__default.createElement(ContentSwitcher, {
    className: "".concat(baseClass, "__content-switcher"),
    onChange: function onChange(selected) {
      setActiveView(selected.name);
    },
    selectedIndex: activeView === GRID ? 0 : 1,
    "data-testid": "".concat(testId, "-content-switcher")
  }, /*#__PURE__*/React__default.createElement(IconSwitch, {
    name: GRID,
    size: "lg",
    text: gridButtonText,
    renderIcon: function renderIcon(props) {
      return /*#__PURE__*/React__default.createElement(Grid, _extends({
        size: 20
      }, props));
    },
    index: 0,
    "data-testid": "".concat(testId, "-grid-switch")
  }), /*#__PURE__*/React__default.createElement(IconSwitch, {
    name: LIST,
    size: "lg",
    text: listButtonText,
    renderIcon: function renderIcon(props) {
      return /*#__PURE__*/React__default.createElement(List, _extends({
        size: 20
      }, props));
    },
    index: 1,
    "data-testid": "".concat(testId, "-list-switch")
  })))), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(baseClass, "__flex-wrapper")
  }, /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(baseClass, "__scroll-panel"), _defineProperty(_defineProperty({}, "".concat(baseClass, "__scroll-panel--grid"), activeView === GRID), "".concat(baseClass, "__scroll-panel--list"), activeView === LIST))
  }, filteredContent.map(function (imageProps) {
    return /*#__PURE__*/React__default.createElement(ImageTile, _extends({
      isWide: activeView === LIST,
      key: imageProps.id,
      onDelete: function onDelete(id) {
        // set the current selected image and popup the warning modal
        if ((selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.id) !== id) {
          setSelectedImage(imageProps);
        }
        setIsDeleteWarningModalOpen(true);
      }
    }, imageProps, {
      toggleImageSelection: function toggleImageSelection() {
        return _toggleImageSelection(imageProps);
      },
      isSelected: (selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.id) === imageProps.id,
      testId: "".concat(testId, "-").concat(imageProps.id)
    }));
  }))))));
};
ImageGalleryModal.propTypes = propTypes;
ImageGalleryModal.defaultProps = defaultProps;
ImageGalleryModal.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ImageGalleryModal",
  "props": {
    "className": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "Classname to be added to the root node",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "content": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "Array of the images that should be shown",
      "type": {
        "name": "custom",
        "raw": "ImagePropTypes"
      },
      "required": false
    },
    "defaultView": {
      "defaultValue": {
        "value": "'grid'",
        "computed": false
      },
      "description": "The name of the view to be selected by default",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'grid'",
          "computed": false
        }, {
          "value": "'list'",
          "computed": false
        }]
      },
      "required": false
    },
    "footer": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "description": "The footer prop of the ComposedModalPropTypes",
      "type": {
        "name": "custom",
        "raw": "ComposedModalPropTypes.footer"
      },
      "required": false
    },
    "searchProperty": {
      "defaultValue": {
        "value": "'id'",
        "computed": false
      },
      "description": "The image property to be included in the search",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "onDelete": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "optional method to allow deletion of the images in the gallery",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "gridButtonText": {
      "defaultValue": {
        "value": "'Grid'",
        "computed": false
      },
      "description": "The text of the grid button in the grid list toggle",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "instructionText": {
      "defaultValue": {
        "value": "'Select the image that you want to display on this card.'",
        "computed": false
      },
      "description": "The text with instructions showing above the search",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "listButtonText": {
      "defaultValue": {
        "value": "'List'",
        "computed": false
      },
      "description": "The text of the list button in the grid list toggle",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "modalLabelText": {
      "defaultValue": {
        "value": "'New image card'",
        "computed": false
      },
      "description": "The small label text of the modal",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "modalTitleText": {
      "defaultValue": {
        "value": "'Image gallery'",
        "computed": false
      },
      "description": "The large title text of the modal",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "modalPrimaryButtonLabelText": {
      "defaultValue": {
        "value": "'Select'",
        "computed": false
      },
      "description": "The primary button (select) text of the modal",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "deleteLabelText": {
      "defaultValue": {
        "value": "'Delete'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "deleteModalLabelText": {
      "defaultValue": {
        "value": "'Delete image'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "deleteModalTitleText": {
      "defaultValue": {
        "value": "(image) => `Are you sure you want to delete the image: ${image}?`",
        "computed": false
      },
      "description": "callback function that passes the image name and returns the title text for the delete",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "modalSecondaryButtonLabelText": {
      "defaultValue": {
        "value": "'Cancel'",
        "computed": false
      },
      "description": "The secondary button (cancel) text of the modal",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "modalCloseIconDescriptionText": {
      "defaultValue": {
        "value": "'Close'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "searchPlaceHolderText": {
      "defaultValue": {
        "value": "'Search image by file name'",
        "computed": false
      },
      "description": "The text for the search input placeHolder",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'image-gallery-modal'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "onSubmit": {
      "description": "Callback called with selected image props when modal submit button is pressed.",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onClose": {
      "description": "Callback called when modal close icon or cancel button is pressed",
      "type": {
        "name": "func"
      },
      "required": true
    }
  },
  "composes": ["../ComposedModal/ComposedModal"]
};
var ImageGalleryModal$1 = ImageGalleryModal;

export { ImagePropTypes, ImageGalleryModal$1 as default };
