import _typeof from '@babel/runtime/helpers/typeof';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
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.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/web.dom-collections.for-each.js';
import React__default, { useMemo } from 'react';
import { DragSource } from 'react-dnd';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import warning from 'warning';
import { EditingStyle } from '../../../utils/DragAndDropUtils.js';
import { settings } from '../../../constants/Settings.js';
import { handleSpecificKeyDown } from '../../../utils/componentUtilityFunctions.js';
import { ITEM_LEVEL_OFFSET, ITEM_COLUMN_GAP } from '../VirtualListContent/listConstants.js';
import ListItemWrapper from './ListItemWrapper.js';
import { ChevronUp, ChevronDown, Locked, Draggable } from '@carbon/icons-react';

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 iotPrefix = settings.iotPrefix;
var ItemType = 'ListItem';
var ListItemPropTypes = {
  id: PropTypes.string.isRequired,
  editingStyle: PropTypes.oneOf([EditingStyle.Single, EditingStyle.Multiple, EditingStyle.SingleNesting, EditingStyle.MultipleNesting]),
  isLargeRow: PropTypes.bool,
  isLocked: PropTypes.bool,
  isExpandable: PropTypes.bool,
  onExpand: PropTypes.func,
  isSelectable: PropTypes.bool,
  disabled: PropTypes.bool,
  onSelect: PropTypes.func,
  renderDropTargets: PropTypes.bool,
  getAllowedDropIds: PropTypes.func,
  /** the id of the item currently being dragged if any */
  draggingId: PropTypes.string,
  selected: PropTypes.bool,
  expanded: PropTypes.bool,
  value: PropTypes.string.isRequired,
  /** text displayed on hover */
  title: PropTypes.string,
  /** string value or callback render function */
  secondaryValue: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.shape({
    value: PropTypes.func,
    label: PropTypes.string
  })]),
  /** either a callback render function or a node */
  rowActions: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.func]),
  icon: PropTypes.node,
  iconPosition: PropTypes.string,
  isCategory: PropTypes.bool,
  /** i18n strings */
  i18n: PropTypes.shape({
    expand: PropTypes.string,
    close: PropTypes.string
  }),
  /** Default selected item ref needed for scrolling */
  selectedItemRef: PropTypes.oneOfType([
  // Either a function
  PropTypes.func,
  // Or the instance of a DOM native element (see the note about SSR)
  PropTypes.shape({
    current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
  })]),
  /** The nodes should be Carbon Tags components */
  tags: PropTypes.arrayOf(PropTypes.node),
  /* these props come from react-dnd */
  connectDragSource: PropTypes.func.isRequired,
  connectDragPreview: PropTypes.func.isRequired,
  index: PropTypes.number.isRequired,
  dragPreviewText: PropTypes.string,
  nestingLevel: PropTypes.number,
  isDragging: PropTypes.bool.isRequired,
  onItemMoved: PropTypes.func.isRequired,
  itemWillMove: PropTypes.func.isRequired,
  /** true if the list item should not be focusable even though isSelectable is true */
  preventRowFocus: PropTypes.bool
};
var ListItemDefaultProps = {
  editingStyle: null,
  isLargeRow: false,
  isLocked: false,
  isExpandable: false,
  dragPreviewText: null,
  onExpand: function onExpand() {},
  isSelectable: false,
  disabled: false,
  onSelect: function onSelect() {},
  renderDropTargets: false,
  getAllowedDropIds: null,
  draggingId: null,
  selected: false,
  expanded: false,
  secondaryValue: null,
  rowActions: null,
  icon: null,
  iconPosition: 'left',
  nestingLevel: 0,
  isCategory: false,
  i18n: {
    expand: 'Expand',
    close: 'Close',
    dragHandle: 'Drag handle'
  },
  selectedItemRef: null,
  tags: null,
  preventRowFocus: false,
  title: null
};
var ListItem = function ListItem(_ref) {
  var id = _ref.id,
    editingStyle = _ref.editingStyle,
    isLargeRow = _ref.isLargeRow,
    isExpandable = _ref.isExpandable,
    onExpand = _ref.onExpand,
    expanded = _ref.expanded,
    isSelectable = _ref.isSelectable,
    onSelect = _ref.onSelect,
    selected = _ref.selected,
    disabled = _ref.disabled,
    value = _ref.value,
    title = _ref.title,
    secondaryValue = _ref.secondaryValue,
    rowActions = _ref.rowActions,
    renderDropTargets = _ref.renderDropTargets,
    getAllowedDropIds = _ref.getAllowedDropIds,
    draggingId = _ref.draggingId,
    icon = _ref.icon,
    iconPosition = _ref.iconPosition,
    onItemMoved = _ref.onItemMoved,
    nestingLevel = _ref.nestingLevel,
    isCategory = _ref.isCategory,
    isLocked = _ref.isLocked,
    i18n = _ref.i18n,
    isDragging = _ref.isDragging,
    selectedItemRef = _ref.selectedItemRef,
    tags = _ref.tags,
    connectDragSource = _ref.connectDragSource,
    connectDragPreview = _ref.connectDragPreview,
    itemWillMove = _ref.itemWillMove,
    dragPreviewText = _ref.dragPreviewText,
    preventRowFocus = _ref.preventRowFocus;
  var mergedI18n = useMemo(function () {
    return _objectSpread(_objectSpread({}, ListItemDefaultProps.i18n), i18n);
  }, [i18n]);
  var handleExpansionClick = function handleExpansionClick(event) {
    event.stopPropagation();
    /* istanbul ignore else */
    if (isExpandable) {
      onExpand(id);
    }
  };
  if (Array.isArray(rowActions)) {
    warning(false, 'You have passed an array of nodes to ListItem as rowActions.  This can cause performance problems and has been deprecated.  You should pass a render function instead.') ;
  }
  var renderNestingOffset = function renderNestingOffset() {
    return nestingLevel > 0 ? /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(iotPrefix, "--list-item--nesting-offset"),
      style: {
        width: "".concat(nestingLevel * ITEM_LEVEL_OFFSET - ITEM_COLUMN_GAP, "px")
      }
    }) : null;
  };
  var renderExpander = function renderExpander() {
    return isExpandable ? /*#__PURE__*/React__default.createElement("div", {
      role: "button",
      tabIndex: 0,
      className: classnames("".concat(iotPrefix, "--list-item--expand-icon"), _defineProperty({}, "".concat(iotPrefix, "--list-item--expand-icon__disabled"), disabled)),
      onClick: !disabled ? handleExpansionClick : undefined,
      "data-testid": "expand-icon",
      "aria-label": expanded ? mergedI18n.close : mergedI18n.expand,
      title: expanded ? mergedI18n.close : mergedI18n.expand,
      onKeyPress: function onKeyPress(event) {
        return event.key === 'Enter' && handleExpansionClick(event);
      }
    }, expanded ? /*#__PURE__*/React__default.createElement(ChevronUp, {
      "aria-label": "".concat(mergedI18n.close, "-icon")
    }) : /*#__PURE__*/React__default.createElement(ChevronDown, {
      "aria-label": "".concat(mergedI18n.expand, "-icon")
    })) : null;
  };
  var renderIcon = function renderIcon() {
    return icon ? /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(iotPrefix, "--list-item--content--icon ").concat(iotPrefix, "--list-item--content--icon__").concat(iconPosition)
    }, icon) : null;
  };
  var hasRowActions = rowActions && (typeof rowActions === 'function' || (rowActions === null || rowActions === void 0 ? void 0 : rowActions.length));
  var renderRowActions = function renderRowActions() {
    return hasRowActions ?
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    React__default.createElement("div", {
      className: "".concat(iotPrefix, "--list-item--content--row-actions")
      // add event handlers to prevent rowAction items from bubbling and causing
      // list re-renders
      ,
      onKeyPress: handleSpecificKeyDown(['Enter', ' '], function (e) {
        e.stopPropagation();
      }),
      onClick: function onClick(e) {
        e.stopPropagation();
      }
    }, typeof rowActions === 'function' ? rowActions() : rowActions) : null;
  };
  var renderTags = function renderTags() {
    return tags && tags.length > 0 ? /*#__PURE__*/React__default.createElement("div", null, tags) : null;
  };
  var renderDragPreview = function renderDragPreview() {
    if (editingStyle && connectDragPreview) {
      return connectDragPreview(/*#__PURE__*/React__default.createElement("div", {
        className: "".concat(iotPrefix, "--list-item-editable--drag-preview")
      }, dragPreviewText || value));
    }
    return null;
  };
  var renderSecondaryValue = function renderSecondaryValue() {
    return secondaryValue ? /*#__PURE__*/React__default.createElement("div", {
      title: typeof secondaryValue === 'function' && typeof secondaryValue() === 'string' ? secondaryValue() : typeof secondaryValue === 'function' ? '' : _typeof(secondaryValue) === 'object' && secondaryValue !== null ? secondaryValue.label : secondaryValue,
      className: classnames("".concat(iotPrefix, "--list-item--content--values--value"), _defineProperty(_defineProperty({}, "".concat(iotPrefix, "--list-item--content--values--value__large"), isLargeRow), "".concat(iotPrefix, "--list-item--content--values__disabled"), disabled))
    }, typeof secondaryValue === 'function' ? secondaryValue() : _typeof(secondaryValue) === 'object' && secondaryValue !== null ? secondaryValue.value() : secondaryValue) : null;
  };
  var dragIcon = function dragIcon() {
    return isLocked ? /*#__PURE__*/React__default.createElement(Locked, {
      className: classnames("".concat(iotPrefix, "--list-item--lock"))
    }) : editingStyle ? /*#__PURE__*/React__default.createElement("div", {
      title: mergedI18n.dragHandle
    }, /*#__PURE__*/React__default.createElement(Draggable, {
      className: classnames("".concat(iotPrefix, "--list-item--handle"), _defineProperty({}, "".concat(iotPrefix, "--list-item--handle__disabled"), disabled)),
      "data-testid": "list-item-editable"
    })) : null;
  };
  return /*#__PURE__*/React__default.createElement(ListItemWrapper, {
    isPreview: false,
    id: id,
    isSelectable: isSelectable,
    selected: selected,
    isDragging: isDragging,
    editingStyle: editingStyle,
    expanded: expanded,
    isLargeRow: isLargeRow,
    onSelect: onSelect,
    connectDragSource: connectDragSource,
    onItemMoved: onItemMoved,
    itemWillMove: itemWillMove,
    disabled: disabled,
    renderDropTargets: renderDropTargets,
    getAllowedDropIds: getAllowedDropIds ? function () {
      return getAllowedDropIds(draggingId);
    } : null,
    preventRowFocus: preventRowFocus
  }, renderDragPreview(), dragIcon(), renderNestingOffset(), renderExpander(), /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(iotPrefix, "--list-item--content"), _defineProperty({}, "".concat(iotPrefix, "--list-item--content__selected"), !editingStyle && selected), _defineProperty({}, "".concat(iotPrefix, "--list-item--content__large"), isLargeRow)),
    ref: selectedItemRef
  }, renderIcon(), /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(iotPrefix, "--list-item--content--values"), _defineProperty({}, "".concat(iotPrefix, "--list-item--content--values__large"), isLargeRow))
  }, /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(iotPrefix, "--list-item--content--values--main"), _defineProperty({}, "".concat(iotPrefix, "--list-item--content--values--main__large"), isLargeRow))
  }, /*#__PURE__*/React__default.createElement("div", {
    className: classnames("".concat(iotPrefix, "--list-item--content--values--value"), _defineProperty(_defineProperty({}, "".concat(iotPrefix, "--list-item--category"), isCategory), "".concat(iotPrefix, "--list-item--content--values__disabled"), disabled)),
    title: title || value
  }, value), renderSecondaryValue()), renderTags(), renderRowActions())));
};
var dragSourceSpecification = {
  beginDrag: function beginDrag(props) {
    return {
      id: props.id
    };
  }
};

// These props originate from React DND and are passed down to
// the ListItem via the DragSource wrapper.
var dndPropsCollecting = function dndPropsCollecting(connect, monitor) {
  var _monitor$getItem;
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
    renderDropTargets: monitor.getItemType() !== null,
    // render drop targets if anything is dragging
    draggingId: (_monitor$getItem = monitor.getItem()) === null || _monitor$getItem === void 0 ? void 0 : _monitor$getItem.id
  };
};
var ds = DragSource(ItemType, dragSourceSpecification, dndPropsCollecting);
ListItem.propTypes = ListItemPropTypes;
ListItem.defaultProps = ListItemDefaultProps;
ListItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ListItem",
  "props": {
    "editingStyle": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "EditingStyle.Single",
          "computed": true
        }, {
          "value": "EditingStyle.Multiple",
          "computed": true
        }, {
          "value": "EditingStyle.SingleNesting",
          "computed": true
        }, {
          "value": "EditingStyle.MultipleNesting",
          "computed": true
        }]
      },
      "required": false
    },
    "isLargeRow": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isLocked": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isExpandable": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "dragPreviewText": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "onExpand": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "isSelectable": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "onSelect": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "renderDropTargets": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "getAllowedDropIds": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "draggingId": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "the id of the item currently being dragged if any",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "selected": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "expanded": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "secondaryValue": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "string value or callback render function",
      "type": {
        "name": "union",
        "value": [{
          "name": "string"
        }, {
          "name": "func"
        }, {
          "name": "shape",
          "value": {
            "value": {
              "name": "func",
              "required": false
            },
            "label": {
              "name": "string",
              "required": false
            }
          }
        }]
      },
      "required": false
    },
    "rowActions": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "either a callback render function or a node",
      "type": {
        "name": "union",
        "value": [{
          "name": "arrayOf",
          "value": {
            "name": "node"
          }
        }, {
          "name": "func"
        }]
      },
      "required": false
    },
    "icon": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "iconPosition": {
      "defaultValue": {
        "value": "'left'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "nestingLevel": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "isCategory": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  expand: 'Expand',\n  close: 'Close',\n  dragHandle: 'Drag handle',\n}",
        "computed": false
      },
      "description": "i18n strings",
      "type": {
        "name": "shape",
        "value": {
          "expand": {
            "name": "string",
            "required": false
          },
          "close": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "selectedItemRef": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Default selected item ref needed for scrolling",
      "type": {
        "name": "union",
        "value": [{
          "name": "func"
        }, {
          "name": "shape",
          "value": {
            "current": {
              "name": "custom",
              "raw": "typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)",
              "required": false
            }
          }
        }]
      },
      "required": false
    },
    "tags": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "The nodes should be Carbon Tags components",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "node"
        }
      },
      "required": false
    },
    "preventRowFocus": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "true if the list item should not be focusable even though isSelectable is true",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "title": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "text displayed on hover",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "id": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "value": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "connectDragSource": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "connectDragPreview": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "index": {
      "description": "",
      "type": {
        "name": "number"
      },
      "required": true
    },
    "isDragging": {
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": true
    },
    "onItemMoved": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "itemWillMove": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var ListItem$1 = ds(ListItem);

export { ItemType, ListItem as UnconnectedListItem, ListItem$1 as default };
