"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Content = Content;
exports.Outer = Outer;
exports.SheetCompatProvider = SheetCompatProvider;
exports.Target = Target;
exports.TextBubble = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _useTheme = require("../theme/use-theme.js");
var _index = require("../styles/index.js");
var _const = require("./const.js");
var _TextBubble = require("./TextBubble.js");
var _jsxRuntime = require("react/jsx-runtime");
const TooltipContext = /*#__PURE__*/(0, _react.createContext)({
  position: 'bottom',
  visible: false,
  onVisibleChange: () => {}
});
TooltipContext.displayName = 'TooltipContext';

/**
 * No-op on web. Portal Provider is only needed on native.
 */
function SheetCompatProvider({
  children
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: children
  });
}
SheetCompatProvider.displayName = 'TooltipSheetCompatProvider';
function Outer({
  children,
  position = 'bottom',
  visible,
  onVisibleChange
}) {
  const ctx = (0, _react.useMemo)(() => ({
    position,
    visible,
    onVisibleChange
  }), [position, visible, onVisibleChange]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipContext.Provider, {
    value: ctx,
    children: [visible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
      style: webStyles.backdrop,
      onPress: () => onVisibleChange(false),
      accessibilityRole: "none"
    }), children]
  });
}
function Target({
  children
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    collapsable: false,
    style: _index.atoms.relative,
    children: children
  });
}
function Content({
  children,
  label
}) {
  const theme = (0, _useTheme.useTheme)();
  const {
    position,
    visible
  } = (0, _react.useContext)(TooltipContext);
  if (!visible) return null;
  const bubbleBg = theme.isDark ? theme.colors.backgroundSecondary : theme.colors.background;
  const shadowColor = theme.isDark ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.2)';
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    "aria-label": label,
    role: "alert",
    style: (0, _index.flatten)([_index.atoms.absolute, _index.atoms.z_50, {
      left: '50%',
      transform: [{
        translateX: '-50%'
      }],
      width: _const.BUBBLE_MAX_WIDTH
    }, position === 'top' ? {
      bottom: '100%',
      marginBottom: _const.ARROW_SIZE / 2
    } : {
      top: '100%',
      marginTop: _const.ARROW_SIZE / 2
    }]),
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: (0, _index.flatten)([_index.atoms.rounded_sm, _index.atoms.overflow_hidden, {
        backgroundColor: bubbleBg,
        boxShadow: `0 0 24px ${shadowColor}`
      }]),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [_index.atoms.absolute, _index.atoms.z_10, {
          backgroundColor: bubbleBg,
          width: _const.ARROW_SIZE,
          height: _const.ARROW_SIZE,
          left: '50%',
          transform: [{
            translateX: '-50%'
          }, {
            rotate: '45deg'
          }],
          borderTopLeftRadius: _index.atoms.rounded_2xs.borderRadius,
          borderBottomRightRadius: _index.atoms.rounded_2xs.borderRadius,
          ...(position === 'top' ? {
            bottom: -(_const.ARROW_SIZE / 2)
          } : {
            top: -(_const.ARROW_SIZE / 2)
          })
        }]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [_index.atoms.px_md, _index.atoms.py_sm, {
          maxWidth: _const.BUBBLE_MAX_WIDTH
        }],
        children: children
      })]
    })
  });
}
const TextBubble = exports.TextBubble = (0, _TextBubble.createTextBubble)(Content);
const webStyles = _reactNative.StyleSheet.create({
  backdrop: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 40
  }
});
//# sourceMappingURL=index.web.js.map