"use strict";

import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { Text } from "../typography/index.js";
import { Portal } from "../portal/index.web.js";
import { MenuContext, ItemContext, useMenuContext, useMenuItemContext } from "./context.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export { useMenuContext };
export function useMenuControl() {
  const id = useId();
  const [isOpen, setIsOpen] = useState(false);
  return useMemo(() => ({
    id,
    isOpen,
    open() {
      setIsOpen(true);
    },
    close() {
      setIsOpen(false);
    }
  }), [id, isOpen]);
}

/**
 * Adapter that wraps MenuControlProps to satisfy the DialogControlProps
 * interface required by MenuContextType. This avoids using type suppressions
 * by providing a real ref object.
 */
function useMenuControlAsDialogControl(menuControl) {
  const ref = useRef(null);
  return useMemo(() => {
    const dialogControl = {
      id: menuControl.id,
      ref,
      open() {
        menuControl.open();
      },
      close(cb) {
        menuControl.close();
        if (typeof cb === 'function') {
          cb();
        }
      }
    };
    return dialogControl;
  }, [menuControl]);
}
export function Root({
  children,
  control
}) {
  const defaultControl = useMenuControl();
  const activeControl = control ?? defaultControl;
  const dialogControl = useMenuControlAsDialogControl(activeControl);
  const context = useMemo(() => ({
    control: dialogControl
  }), [dialogControl]);
  return /*#__PURE__*/_jsxs(MenuContext.Provider, {
    value: context,
    children: [activeControl.isOpen && /*#__PURE__*/_jsx(Portal, {
      children: /*#__PURE__*/_jsx(Pressable, {
        style: styles.backdrop,
        onPress: () => activeControl.close(),
        accessibilityHint: "",
        accessibilityLabel: "Close menu"
      })
    }), children]
  });
}
export function Trigger({
  children,
  label,
  role = 'button',
  hint
}) {
  const {
    control
  } = useMenuContext();
  const [hovered, setHovered] = useState(false);
  const [focused, setFocused] = useState(false);
  return children({
    control,
    state: {
      hovered,
      focused,
      pressed: false
    },
    props: {
      onPress: () => control.open(),
      onFocus: () => setFocused(true),
      onBlur: () => setFocused(false),
      accessibilityHint: hint,
      accessibilityLabel: label,
      accessibilityRole: role
    }
  });
}
export function Outer({
  children,
  style
}) {
  const theme = useTheme();
  const dropdownRef = useRef(null);
  return /*#__PURE__*/_jsx(View, {
    ref: dropdownRef,
    style: [styles.dropdown, {
      backgroundColor: theme.isDark ? theme.colors.backgroundSecondary : theme.colors.background,
      borderColor: theme.colors.borderLight,
      shadowColor: theme.colors.shadow
    }, style],
    children: children
  });
}
export function Item({
  children,
  label,
  onPress,
  style,
  ...rest
}) {
  const theme = useTheme();
  const {
    control
  } = useMenuContext();
  const [hovered, setHovered] = useState(false);
  const [focused, setFocused] = useState(false);
  const handlePress = useCallback(e => {
    onPress(e);
    if (!e.defaultPrevented) {
      control.close();
    }
  }, [control, onPress]);
  const isDisabled = Boolean(rest.disabled);
  const isHighlighted = (hovered || focused) && !isDisabled;
  const itemContextValue = useMemo(() => ({
    disabled: isDisabled
  }), [isDisabled]);
  return /*#__PURE__*/_jsx(Pressable, {
    ...rest,
    accessibilityHint: "",
    accessibilityLabel: label,
    onPress: handlePress,
    onFocus: () => setFocused(true),
    onBlur: () => setFocused(false),
    onMouseEnter: () => setHovered(true),
    onMouseLeave: () => setHovered(false),
    style: [styles.webItem, isHighlighted && {
      backgroundColor: theme.isDark ? theme.colors.contrast50 : theme.colors.backgroundSecondary
    }, style],
    children: /*#__PURE__*/_jsx(ItemContext.Provider, {
      value: itemContextValue,
      children: children
    })
  });
}
export function ItemText({
  children,
  style
}) {
  const theme = useTheme();
  const {
    disabled
  } = useMenuItemContext();
  return /*#__PURE__*/_jsx(Text, {
    style: [styles.webItemText, {
      color: disabled ? theme.colors.textTertiary : theme.colors.text
    }, ...(style ? [style] : [])],
    children: children
  });
}
export function ItemIcon({
  icon: Comp,
  position = 'left',
  fill
}) {
  const theme = useTheme();
  const {
    disabled
  } = useMenuItemContext();
  return /*#__PURE__*/_jsx(View, {
    style: [position === 'left' && styles.iconLeft, position === 'right' && styles.iconRight],
    children: /*#__PURE__*/_jsx(Comp, {
      size: "md",
      fill: fill ? fill({
        disabled
      }) : disabled ? theme.colors.textTertiary : theme.colors.textSecondary
    })
  });
}
export function Group({
  children
}) {
  return /*#__PURE__*/_jsx(_Fragment, {
    children: children
  });
}
export function Divider() {
  const theme = useTheme();
  return /*#__PURE__*/_jsx(View, {
    style: [styles.divider, {
      backgroundColor: theme.colors.borderLight
    }]
  });
}
const styles = StyleSheet.create({
  backdrop: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 50,
    // Opt back in from the Portal root's `pointer-events: none`.
    pointerEvents: 'auto'
  },
  dropdown: {
    borderRadius: 8,
    padding: 4,
    borderWidth: 1,
    overflow: 'hidden',
    shadowOpacity: 0.15,
    shadowRadius: 12,
    shadowOffset: {
      width: 0,
      height: 4
    },
    minWidth: 180
  },
  webItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    paddingVertical: 8,
    borderRadius: 6,
    overflow: 'hidden',
    paddingHorizontal: 10,
    minHeight: 32
  },
  webItemText: {
    flex: 1,
    fontWeight: '600'
  },
  iconLeft: {
    marginLeft: -2
  },
  iconRight: {
    marginRight: -2,
    marginLeft: 12
  },
  divider: {
    height: 1,
    marginVertical: 4
  }
});
//# sourceMappingURL=index.web.js.map