/* drag-preview.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./drag-preview.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { ExpandableMenuItemLevelContext } from '../expandable-menu-item/expandable-menu-item-level-context';
import { MenuItemBase } from '../menu-item';
import { COLLAPSE_ELEM_BEFORE } from '../menu-item-signals';

// Using JavaScript for detecting Safari, as I could not find a reliable way to do it with CSS.
function isSafari() {
  if (process.env.NODE_ENV === 'test') {
    return false;
  }
  if (typeof window === 'undefined') {
    return false;
  }
  const {
    userAgent
  } = navigator;
  return userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
}
const dragPreviewStyles = {
  root: "_2rko12b0 _189ee4h9 _1h6dmuej _1dqonqa1 _bfhkvuon _y4ti1b66 _p12fgx0z",
  safariFix: "_1ul9uuw1"
};

/**
 * A drag preview for sidebar menu items.
 *
 * The limited API corresponds with the limited amount of information we
 * want to show in drag previews.
 *
 * If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
 * There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
 * need to maintain vertical side navigation vertical alignment in the drag preview.
 *
 * Please ensure the drag preview is pushed away from the users pointer
 * (with `pointerOutsideOfPreview()` from Pragmatic drag and drop) by our
 * standard amount (`{x: token('space.200'), y: token('space.100')`)
 */
export function DragPreview({
  elemBefore,
  children
}) {
  return (
    /*#__PURE__*/
    // Resetting the expandable menu items to 0.
    // This is to prevent our hidden element from pushing
    // the drag preview further away from the users pointer
    React.createElement(ExpandableMenuItemLevelContext.Provider, {
      value: 0
    }, /*#__PURE__*/React.createElement("div", {
      className: ax([dragPreviewStyles.root, isSafari() && dragPreviewStyles.safariFix])
    }, /*#__PURE__*/React.createElement(MenuItemBase, {
      elemBefore: elemBefore !== null && elemBefore !== void 0 ? elemBefore : COLLAPSE_ELEM_BEFORE
    }, children)))
  );
}