import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useRef, useId, forwardRef, createElement, useState } from 'react';
import { DragOverlay, useDraggable, useDroppable, TouchSensor, PointerSensor, useSensors, useSensor, DndContext } from '@dnd-kit/core';
import classnames from 'classnames';
import { n } from './inject-css-C2dztUxs.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { P as PropTypes } from './index-DAYCJu79.js';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { useInView } from 'react-intersection-observer';
import './_commonjsHelpers-BFTU3MAI.js';

var css = ".neeto-molecules-boardview-section{flex-shrink:0;width:280px}@media screen and (min-width:768px){.neeto-molecules-boardview-section{width:300px}}@media screen and (min-width:1024px){.neeto-molecules-boardview-section{width:350px}}.neeto-molecules-boardview-section__body,.neeto-molecules-boardview-section__header{padding-inline-end:1rem;padding-inline-start:1rem}.neeto-molecules-boardview-section__body{display:flex;flex-direction:column}.neeto-molecules-boardview-section__card{margin-block-end:.75rem}";
n(css,{});

function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var distanceBetween = function distanceBetween(p1, p2) {
  return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
};
var centerOfRectangle = function centerOfRectangle(rect) {
  var left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : rect.left;
  var top = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rect.top;
  return {
    x: left + rect.width * 0.5,
    y: top + rect.height * 0.5
  };
};
var matchType = function matchType(draggable, droppable) {
  return droppable.data.current.accepts.includes(draggable.data.current.type);
};
var matchDirection = function matchDirection(direction, droppable, reference) {
  var matchX = function matchX() {
    return reference.x > droppable.left && reference.x < droppable.left + droppable.width;
  };
  var matchY = function matchY() {
    return reference.y > droppable.top && reference.y < droppable.top + droppable.height;
  };
  if (direction === "vertical") return matchX();else if (direction === "horizontal") return matchY();
  return true;
};
var closestCenter = function closestCenter(_ref) {
  var active = _ref.active;
  return function (_ref2) {
    var _active$data$current;
    var collisionRect = _ref2.collisionRect,
      droppableRects = _ref2.droppableRects,
      droppableContainers = _ref2.droppableContainers,
      pointerCoordinates = _ref2.pointerCoordinates;
    var direction = (_active$data$current = active.data.current) === null || _active$data$current === void 0 ? void 0 : _active$data$current.direction;
    var centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
    var minDistance = Number.POSITIVE_INFINITY;
    var collision = {
      id: undefined
    };

    // eslint-disable-next-line @bigbinary/neeto/use-array-methods
    var _iterator = _createForOfIteratorHelper(droppableContainers),
      _step;
    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var droppableContainer = _step.value;
        var rect = droppableRects.get(droppableContainer.id);
        if (!rect || droppableContainer.id === active.id) continue;else if (!matchType(active, droppableContainer)) continue;else if (!matchDirection(direction, rect, pointerCoordinates)) continue;
        var distance = distanceBetween(centerOfRectangle(rect), centerRect);
        if (distance < minDistance) {
          minDistance = distance;
          collision = {
            id: droppableContainer.id,
            data: {
              droppableContainer: droppableContainer,
              value: distance
            }
          };
        }
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }
    return [collision];
  };
};

var DRAGGABLE_TYPES = {
  SECTION: "section",
  ITEM: "item"
};
var MEASURING_CONFIG = {
  droppable: {
    frequency: 500
  }
};
var POINTER_SENSOR_CONFIG = {
  activationConstraint: {
    distance: 8
  }
};
var TOUCH_SENSOR_CONFIG = {
  activationConstraint: {
    delay: 300,
    tolerance: 5
  }
};

var DndOverlay = function DndOverlay(_ref) {
  var _state$active;
  var props = _ref.props,
    state = _ref.state;
  var renderSectionOverlay = props.renderSectionOverlay,
    renderItemOverlay = props.renderItemOverlay;
  var data = ((_state$active = state.active) === null || _state$active === void 0 ? void 0 : _state$active.data.current) || {};
  return /*#__PURE__*/jsxs(DragOverlay, {
    className: "neeto-ui-shadow-xs",
    children: [data.type === DRAGGABLE_TYPES.ITEM && (renderItemOverlay === null || renderItemOverlay === void 0 ? void 0 : renderItemOverlay(data)), data.type === DRAGGABLE_TYPES.SECTION && (renderSectionOverlay === null || renderSectionOverlay === void 0 ? void 0 : renderSectionOverlay(data))]
  });
};

var DndIndicator = function DndIndicator(_ref) {
  var _ref$layout = _ref.layout,
    layout = _ref$layout === void 0 ? "vertical" : _ref$layout;
  return /*#__PURE__*/jsx("div", {
    className: classnames("neeto-ui-rounded-xl neeto-ui-bg-accent-600 absolute", {
      "-bottom-3 end-0 start-0 h-1": layout === "horizontal",
      "-end-2 bottom-0 top-0 w-1": layout === "vertical"
    })
  });
};

function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DragDropContainer$1 = function DragDropContainer(_ref) {
  var id = _ref.id,
    index = _ref.index,
    data = _ref.data,
    render = _ref.render,
    _ref$isDragAndDropDis = _ref.isDragAndDropDisabled,
    isDragAndDropDisabled = _ref$isDragAndDropDis === void 0 ? false : _ref$isDragAndDropDis;
  var _useDraggable = useDraggable({
      data: _objectSpread$3(_objectSpread$3({}, data), {}, {
        index: index,
        type: DRAGGABLE_TYPES.ITEM,
        direction: "vertical"
      }),
      id: "draggable-item--".concat(id),
      disabled: isDragAndDropDisabled
    }),
    attributes = _useDraggable.attributes,
    listeners = _useDraggable.listeners,
    isDragging = _useDraggable.isDragging,
    setDraggableNodeRef = _useDraggable.setNodeRef;
  var _useDroppable = useDroppable({
      data: _objectSpread$3(_objectSpread$3({}, data), {}, {
        accepts: [DRAGGABLE_TYPES.ITEM],
        index: index + 1
      }),
      id: "droppable-item--".concat(id)
    }),
    isOver = _useDroppable.isOver,
    setDroppableNodeRef = _useDroppable.setNodeRef;
  var isIndicatorVisible = !isDragging && isOver;
  return /*#__PURE__*/jsxs("div", _objectSpread$3(_objectSpread$3(_objectSpread$3({
    className: classnames("relative h-full w-full select-none", {
      "opacity-65": isDragging
    }),
    ref: function ref(node) {
      setDraggableNodeRef(node);
      setDroppableNodeRef(node);
    }
  }, !isDragAndDropDisabled && attributes), !isDragAndDropDisabled && listeners), {}, {
    children: [render(), isIndicatorVisible && /*#__PURE__*/jsx(DndIndicator, {
      layout: "horizontal"
    })]
  }));
};
var ItemContainer = function ItemContainer(props) {
  var mutables = useRef({
    containerHeight: 128
  }).current;
  var _useInView = useInView({
      onChange: function onChange(inView, entry) {
        if (inView) return; // We need the last height value when elements moves out.
        mutables.containerHeight = entry.target.clientHeight;
      }
    }),
    _useInView2 = _slicedToArray(_useInView, 2),
    setViewRef = _useInView2[0],
    inView = _useInView2[1];
  return /*#__PURE__*/jsx("div", {
    className: "neeto-molecules-boardview-section__card relative shrink-0",
    id: props.id,
    style: {
      height: inView ? undefined : mutables.containerHeight
    },
    ref: function ref(node) {
      setViewRef(node);
    },
    children: inView && /*#__PURE__*/jsx(DragDropContainer$1, _objectSpread$3({}, props))
  });
};

function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ItemPlaceholder = function ItemPlaceholder(_ref) {
  var data = _ref.data,
    _ref$index = _ref.index,
    index = _ref$index === void 0 ? 0 : _ref$index;
  var id = useId();
  var _useDroppable = useDroppable({
      data: _objectSpread$2(_objectSpread$2({}, data), {}, {
        accepts: [DRAGGABLE_TYPES.ITEM],
        index: index
      }),
      id: "droppable-item--".concat(id)
    }),
    isOver = _useDroppable.isOver,
    setNodeRef = _useDroppable.setNodeRef;
  return /*#__PURE__*/jsx("div", {
    className: "relative",
    ref: setNodeRef,
    children: isOver && /*#__PURE__*/jsx(DndIndicator, {
      layout: "horizontal"
    })
  });
};

var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var section = _ref.section,
    items = _ref.items,
    renderItem = _ref.renderItem,
    isDragAndDropDisabled = _ref.isDragAndDropDisabled;
  return /*#__PURE__*/jsxs("div", {
    ref: ref,
    className: "neeto-molecules-boardview-section__body relative min-h-0 flex-1 basis-0 overflow-y-auto",
    children: [/*#__PURE__*/jsx(ItemPlaceholder, {
      data: {
        section: section
      }
    }), items.map(function (item, index) {
      return /*#__PURE__*/createElement(ItemContainer, {
        index: index,
        isDragAndDropDisabled: isDragAndDropDisabled,
        data: {
          section: section,
          item: item
        },
        id: "".concat(section.id, "--").concat(item.id),
        key: "".concat(section.id, "--").concat(item.id),
        render: function render() {
          return renderItem({
            index: index,
            item: item,
            section: section
          });
        }
      });
    })]
  });
});
Section.displayName = "Section";
Section.propTypes = {
  /** A reference to the section container element. */
  // eslint-disable-next-line react/no-unused-prop-types
  ref: PropTypes.any,
  /** The current section data   */
  section: PropTypes.shape({
    id: PropTypes.string.isRequired
  }).isRequired,
  /** When true, disables all drag and drop functionality for the section */
  isDragAndDropDisabled: PropTypes.bool,
  /** An array of items belonging to the current section. */
  items: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired
  })).isRequired,
  /** A function that renders the content of each item in the list. */
  renderItem: PropTypes.func.isRequired
};

function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DragDropContainer = function DragDropContainer(_ref) {
  var id = _ref.id,
    index = _ref.index,
    data = _ref.data,
    render = _ref.render,
    _ref$isDragAndDropDis = _ref.isDragAndDropDisabled,
    isDragAndDropDisabled = _ref$isDragAndDropDis === void 0 ? false : _ref$isDragAndDropDis;
  var _useDraggable = useDraggable({
      data: _objectSpread$1(_objectSpread$1({}, data), {}, {
        type: DRAGGABLE_TYPES.SECTION,
        index: index
      }),
      id: "draggable-section--".concat(id),
      disabled: isDragAndDropDisabled
    }),
    attributes = _useDraggable.attributes,
    listeners = _useDraggable.listeners,
    isDragging = _useDraggable.isDragging,
    setDraggableNodeRef = _useDraggable.setNodeRef;
  var _useDroppable = useDroppable({
      data: _objectSpread$1(_objectSpread$1({}, data), {}, {
        accepts: [DRAGGABLE_TYPES.SECTION],
        index: index + 1
      }),
      id: "droppable-section--".concat(id)
    }),
    isOver = _useDroppable.isOver,
    setDroppableNodeRef = _useDroppable.setNodeRef;
  var isIndicatorVisible = !isDragging && isOver;
  return /*#__PURE__*/jsxs("div", _objectSpread$1(_objectSpread$1(_objectSpread$1({}, !isDragAndDropDisabled && listeners), !isDragAndDropDisabled && attributes), {}, {
    className: classnames("relative h-full w-full select-none flex-col", {
      "opacity-65": isDragging
    }),
    ref: function ref(node) {
      setDraggableNodeRef(node);
      setDroppableNodeRef(node);
    },
    children: [render(), isIndicatorVisible && /*#__PURE__*/jsx(DndIndicator, {
      layout: "vertical"
    })]
  }));
};
var SectionContainer = function SectionContainer(props) {
  var _useInView = useInView(),
    _useInView2 = _slicedToArray(_useInView, 2),
    setViewRef = _useInView2[0],
    inView = _useInView2[1];
  return /*#__PURE__*/jsx("div", {
    className: "neeto-molecules-boardview-section relative me-3 h-full last-of-type:me-0",
    ref: function ref(node) {
      setViewRef(node);
    },
    children: inView && /*#__PURE__*/jsx(DragDropContainer, _objectSpread$1({}, props))
  });
};

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), true).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 SectionPlaceholder = function SectionPlaceholder(_ref) {
  var data = _ref.data,
    _ref$index = _ref.index,
    index = _ref$index === void 0 ? 0 : _ref$index;
  var id = useId();
  var _useDroppable = useDroppable({
      data: _objectSpread(_objectSpread({}, data), {}, {
        accepts: [DRAGGABLE_TYPES.SECTION],
        index: index
      }),
      id: "droppable-section--".concat(id)
    }),
    isOver = _useDroppable.isOver,
    setNodeRef = _useDroppable.setNodeRef;
  return /*#__PURE__*/jsx("div", {
    className: "relative",
    ref: setNodeRef,
    children: isOver && /*#__PURE__*/jsx(DndIndicator, {
      layout: "vertical"
    })
  });
};

var getPlatformSensor = function getPlatformSensor() {
  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ? [TouchSensor, TOUCH_SENSOR_CONFIG] : [PointerSensor, POINTER_SENSOR_CONFIG];
};

var _getPlatformSensor = getPlatformSensor(),
  _getPlatformSensor2 = _slicedToArray(_getPlatformSensor, 2),
  sensor = _getPlatformSensor2[0],
  sensorConfig = _getPlatformSensor2[1];
var BoardView = /*#__PURE__*/forwardRef(function (props, ref) {
  var _props$isDragAndDropD = props.isDragAndDropDisabled,
    isDragAndDropDisabled = _props$isDragAndDropD === void 0 ? false : _props$isDragAndDropD,
    sections = props.sections,
    onMoveSection = props.onMoveSection,
    onMoveItem = props.onMoveItem,
    renderSection = props.renderSection,
    className = props.className;
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    dragState = _useState2[0],
    setDragState = _useState2[1];
  var sensors = useSensors(useSensor(sensor, sensorConfig));
  var onDragEnd = function onDragEnd(drag) {
    var _drag$over;
    if (isDragAndDropDisabled) return;
    var active = dragState.active.data.current;
    var over = (_drag$over = drag.over) === null || _drag$over === void 0 ? void 0 : _drag$over.data.current;
    if (!active || !over) return;
    if (active.type === DRAGGABLE_TYPES.ITEM) {
      onMoveItem === null || onMoveItem === void 0 || onMoveItem(active, over);
    } else if (active.type === DRAGGABLE_TYPES.SECTION) {
      onMoveSection === null || onMoveSection === void 0 || onMoveSection(active, over);
    }
  };
  return /*#__PURE__*/jsxs(DndContext, {
    onDragEnd: onDragEnd,
    collisionDetection: closestCenter(dragState),
    measuring: MEASURING_CONFIG,
    sensors: isDragAndDropDisabled ? [] : sensors,
    onDragStart: isDragAndDropDisabled ? undefined : setDragState,
    children: [/*#__PURE__*/jsxs("div", {
      ref: ref,
      className: classnames("neeto-molecules-boardview-outer-wrapper flex w-full flex-1 overflow-x-auto", className),
      children: [/*#__PURE__*/jsx(SectionPlaceholder, {}), sections.map(function (section, index) {
        return /*#__PURE__*/createElement(SectionContainer, {
          index: index,
          isDragAndDropDisabled: isDragAndDropDisabled,
          data: {
            section: section
          },
          id: section.id,
          key: section.id,
          render: function render() {
            return renderSection({
              index: index,
              section: section,
              isDragAndDropDisabled: isDragAndDropDisabled
            });
          }
        });
      })]
    }), /*#__PURE__*/jsx(DndOverlay, {
      props: props,
      state: dragState
    })]
  });
});
BoardView.displayName = "BoardView";
BoardView.Section = Section;

export { BoardView as default };
//# sourceMappingURL=BoardView.js.map
