"use strict";

import { createContext, useContext, useMemo } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { atoms as a, flatten } from "../styles/index.js";
import { ARROW_SIZE, BUBBLE_MAX_WIDTH } from "./const.js";
import { createTextBubble } from "./TextBubble.js";
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const TooltipContext = /*#__PURE__*/createContext({
  position: 'bottom',
  visible: false,
  onVisibleChange: () => {}
});
TooltipContext.displayName = 'TooltipContext';

/**
 * No-op on web. Portal Provider is only needed on native.
 */
export function SheetCompatProvider({
  children
}) {
  return /*#__PURE__*/_jsx(_Fragment, {
    children: children
  });
}
SheetCompatProvider.displayName = 'TooltipSheetCompatProvider';
export function Outer({
  children,
  position = 'bottom',
  visible,
  onVisibleChange
}) {
  const ctx = useMemo(() => ({
    position,
    visible,
    onVisibleChange
  }), [position, visible, onVisibleChange]);
  return /*#__PURE__*/_jsxs(TooltipContext.Provider, {
    value: ctx,
    children: [visible && /*#__PURE__*/_jsx(Pressable, {
      style: webStyles.backdrop,
      onPress: () => onVisibleChange(false),
      accessibilityRole: "none"
    }), children]
  });
}
export function Target({
  children
}) {
  return /*#__PURE__*/_jsx(View, {
    collapsable: false,
    style: a.relative,
    children: children
  });
}
export function Content({
  children,
  label
}) {
  const theme = useTheme();
  const {
    position,
    visible
  } = 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__*/_jsx(View, {
    "aria-label": label,
    role: "alert",
    style: flatten([a.absolute, a.z_50, {
      left: '50%',
      transform: [{
        translateX: '-50%'
      }],
      width: BUBBLE_MAX_WIDTH
    }, position === 'top' ? {
      bottom: '100%',
      marginBottom: ARROW_SIZE / 2
    } : {
      top: '100%',
      marginTop: ARROW_SIZE / 2
    }]),
    children: /*#__PURE__*/_jsxs(View, {
      style: flatten([a.rounded_sm, a.overflow_hidden, {
        backgroundColor: bubbleBg,
        boxShadow: `0 0 24px ${shadowColor}`
      }]),
      children: [/*#__PURE__*/_jsx(View, {
        style: [a.absolute, a.z_10, {
          backgroundColor: bubbleBg,
          width: ARROW_SIZE,
          height: ARROW_SIZE,
          left: '50%',
          transform: [{
            translateX: '-50%'
          }, {
            rotate: '45deg'
          }],
          borderTopLeftRadius: a.rounded_2xs.borderRadius,
          borderBottomRightRadius: a.rounded_2xs.borderRadius,
          ...(position === 'top' ? {
            bottom: -(ARROW_SIZE / 2)
          } : {
            top: -(ARROW_SIZE / 2)
          })
        }]
      }), /*#__PURE__*/_jsx(View, {
        style: [a.px_md, a.py_sm, {
          maxWidth: BUBBLE_MAX_WIDTH
        }],
        children: children
      })]
    })
  });
}
export const TextBubble = createTextBubble(Content);
const webStyles = StyleSheet.create({
  backdrop: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 40
  }
});
//# sourceMappingURL=index.web.js.map