"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DragNDropList = DragNDropList;
var _react = _interopRequireWildcard(require("react"));
var _reactDnd = require("react-dnd");
var _reactDndHtml5Backend = require("react-dnd-html5-backend");
var _dragAndDropListItem = require("./drag-and-drop-list-item");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/** DragNDropList components implements a row list, items of which can be drag-n-dropped
 * as reordering mechanism. You can also customize how each row look like (See examples below)
 * @midnight-gray-supported
 * @alpine-light-supported
 */
function DragNDropList({
  data,
  onDataChanged,
  canDrag,
  canDrop,
  onDragEnd,
  ListItemContent,
  ListItemComponent,
  listItemClassName,
  keyGetter = dataItem => dataItem.id,
  shouldUseSeparateDragRef = false,
  backend,
  dndManager,
  dragItemType,
  additionalListItemProps,
  dndContainerRef
}) {
  // this is needed as a workaround for WebKit bug with drag n drop and hovering:
  // https://bugs.webkit.org/show_bug.cgi?id=134555
  const [isAnyItemDragging, setIsAnyItemDragging] = (0, _react.useState)(false);
  const handleItemMove = (0, _react.useCallback)((dragIndex, hoverIndex) => {
    const nextData = [...data];
    const draggedItem = nextData[dragIndex];
    nextData.splice(dragIndex, 1);
    nextData.splice(hoverIndex, 0, draggedItem);
    onDataChanged(nextData, dragIndex, hoverIndex);
  }, [data, onDataChanged]);
  const dndProviderProps = {
    backend: backend || _reactDndHtml5Backend.HTML5Backend
  };

  // Provide manager only if it's not undefined
  if (dndManager) {
    dndProviderProps.manager = dndManager;
  }
  function getIndexById(id) {
    return data.findIndex(item => keyGetter(item) === id);
  }

  // code below is to fix react-dnd bug: https://github.com/react-dnd/react-dnd/issues/3304
  // this is needed to invoke component re-render once ref is initialized
  const [dndArea, setDnDArea] = (0, _react.useState)(null);
  // this actually sets ref's value to the state
  (0, _react.useEffect)(() => {
    if (dndContainerRef) {
      setDnDArea(dndContainerRef?.current);
    }
  }, [dndContainerRef]);
  // this will prevent react-dnd from breaking native dnd interactions
  const html5Options = (0, _react.useMemo)(() => ({
    rootElement: dndArea
  }), [dndArea]);
  const shouldRender = dndContainerRef === undefined ? true : !!dndArea;
  return shouldRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDnd.DndProvider, {
    ...dndProviderProps,
    options: html5Options,
    children: data.map((dataItem, index) => {
      const id = keyGetter(dataItem);
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDropListItem.DragNDropListItem, {
        id: id,
        index: index,
        listItem: dataItem,
        onItemMove: handleItemMove,
        canDrag: canDrag,
        canDrop: canDrop,
        isActive: dataItem.isActive,
        isError: dataItem.isError,
        onDragEnd: onDragEnd,
        getIndexById: getIndexById,
        ListItemComponent: ListItemComponent,
        ListItemContent: ListItemContent,
        isAnyItemDragging: isAnyItemDragging,
        setIsAnyItemDragging: setIsAnyItemDragging,
        listItemClassName: listItemClassName,
        shouldUseSeparateDragRef: shouldUseSeparateDragRef,
        dragItemType: dragItemType,
        additionalListItemProps: additionalListItemProps
      }, id);
    })
  }) : null;
}