"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Content = Content;
exports.Icon = Icon;
exports.Item = Item;
exports.ItemIndicator = ItemIndicator;
exports.ItemText = ItemText;
exports.Root = Root;
exports.Separator = Separator;
exports.Trigger = Trigger;
exports.ValueText = ValueText;
Object.defineProperty(exports, "useItemContext", {
  enumerable: true,
  get: function () {
    return _common.useItemContext;
  }
});
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useTheme = require("../theme/use-theme.js");
var _index = require("../typography/index.js");
var _indexWeb = require("../portal/index.web.js");
var _useInteractionState = require("../hooks/useInteractionState.js");
var _Chevron = require("../icons/Chevron.js");
var _Check = require("../icons/Check.js");
var _common = require("./common.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------

const SelectContext = /*#__PURE__*/(0, _react.createContext)(null);
SelectContext.displayName = 'SelectContext';
function useSelectContext() {
  const ctx = (0, _react.useContext)(SelectContext);
  if (!ctx) {
    throw new Error('Select components must be used within a Select.Root');
  }
  return ctx;
}

// ---------------------------------------------------------------------------
// Root
// ---------------------------------------------------------------------------

function Root({
  children,
  value,
  onValueChange,
  disabled
}) {
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
  const ctx = (0, _react.useMemo)(() => ({
    value,
    onValueChange,
    disabled,
    isOpen,
    open: () => setIsOpen(true),
    close: () => setIsOpen(false)
  }), [value, onValueChange, disabled, isOpen]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectContext.Provider, {
    value: ctx,
    children: children
  });
}

// ---------------------------------------------------------------------------
// Trigger
// ---------------------------------------------------------------------------

function Trigger({
  children,
  label
}) {
  const ctx = useSelectContext();
  const theme = (0, _useTheme.useTheme)();
  const triggerId = (0, _react.useId)();
  const {
    state: hovered,
    onIn: onMouseEnter,
    onOut: onMouseLeave
  } = (0, _useInteractionState.useInteractionState)();
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = (0, _useInteractionState.useInteractionState)();
  if (typeof children === 'function') {
    return children({
      control: {
        id: triggerId,
        ref: {
          current: null
        },
        open: ctx.open,
        close: ctx.close
      },
      state: {
        hovered,
        focused,
        pressed: false
      },
      props: {
        onPress: ctx.open,
        onFocus,
        onBlur,
        accessibilityLabel: label
      }
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
    onPress: ctx.open,
    onFocus: onFocus,
    onBlur: onBlur,
    accessibilityLabel: label,
    accessibilityRole: "button",
    onMouseEnter,
    onMouseLeave,
    style: [styles.trigger, {
      backgroundColor: theme.colors.contrast50,
      borderColor: focused ? theme.colors.primary : theme.colors.contrast50
    }],
    children: children
  });
}

// ---------------------------------------------------------------------------
// ValueText
// ---------------------------------------------------------------------------

function ValueText({
  children: extractLabel,
  placeholder,
  style
}) {
  const {
    value
  } = useSelectContext();
  const theme = (0, _useTheme.useTheme)();
  const display = value ?? placeholder ?? '';
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
    numberOfLines: 1,
    style: [styles.valueText, {
      color: value ? theme.colors.text : theme.colors.textSecondary
    }, ...(style ? [style] : [])],
    children: extractLabel && value ? extractLabel(value) : display
  });
}

// ---------------------------------------------------------------------------
// Icon
// ---------------------------------------------------------------------------

function Icon({
  style
}) {
  const theme = (0, _useTheme.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chevron.ChevronBottom_Stroke2_Corner0_Rounded, {
    style: style,
    size: "xs",
    fill: theme.colors.textSecondary
  });
}

// ---------------------------------------------------------------------------
// Content
// ---------------------------------------------------------------------------

function Content({
  items,
  renderItem,
  label = 'Select an option',
  valueExtractor = _common.defaultItemValueExtractor
}) {
  const ctx = useSelectContext();
  const theme = (0, _useTheme.useTheme)();
  if (!ctx.isOpen) return null;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_indexWeb.Portal, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
      style: styles.backdrop,
      onPress: ctx.close,
      accessibilityLabel: "Close selection"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      accessibilityRole: "list",
      accessibilityLabel: label,
      style: [styles.dropdown, {
        backgroundColor: theme.isDark ? theme.colors.backgroundSecondary : theme.colors.background,
        borderColor: theme.colors.borderLight,
        shadowColor: theme.colors.shadow
      }],
      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
        children: renderItem(item, index, ctx.value)
      }, valueExtractor(item)))
    })]
  });
}

// ---------------------------------------------------------------------------
// Item context + value extractor (shared across platforms)
// ---------------------------------------------------------------------------

// ---------------------------------------------------------------------------
// Item
// ---------------------------------------------------------------------------

function Item({
  ref,
  value,
  children,
  style
}) {
  const theme = (0, _useTheme.useTheme)();
  const ctx = useSelectContext();
  const {
    state: hovered,
    onIn: onMouseEnter,
    onOut: onMouseLeave
  } = (0, _useInteractionState.useInteractionState)();
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = (0, _useInteractionState.useInteractionState)();
  const isSelected = ctx.value === value;
  const itemCtx = (0, _react.useMemo)(() => ({
    selected: isSelected,
    hovered,
    focused,
    pressed: false
  }), [isSelected, hovered, focused]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
    ref: ref,
    accessibilityRole: "radio",
    accessibilityState: {
      checked: isSelected
    },
    onPress: () => {
      ctx.onValueChange?.(value);
      ctx.close();
    },
    onFocus: onFocus,
    onBlur: onBlur,
    onMouseEnter,
    onMouseLeave,
    style: [styles.item, (hovered || focused) && {
      backgroundColor: theme.colors.primaryLight
    }, style],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ItemContext.Provider, {
      value: itemCtx,
      children: children
    })
  });
}

// ---------------------------------------------------------------------------
// ItemText
// ---------------------------------------------------------------------------

function ItemText({
  children,
  style
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
    style: [styles.itemText, ...(style ? [style] : [])],
    children: children
  });
}

// ---------------------------------------------------------------------------
// ItemIndicator
// ---------------------------------------------------------------------------

function ItemIndicator({
  icon: IconComponent = _Check.Check_Stroke2_Corner0_Rounded
}) {
  const {
    selected
  } = (0, _common.useItemContext)();
  if (!selected) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.itemIndicatorPlaceholder
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: styles.itemIndicatorContainer,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
      size: "sm"
    })
  });
}

// ---------------------------------------------------------------------------
// Separator
// ---------------------------------------------------------------------------

function Separator() {
  const theme = (0, _useTheme.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.separator, {
      backgroundColor: theme.colors.borderLight
    }]
  });
}

// ---------------------------------------------------------------------------
// Styles
// ---------------------------------------------------------------------------

const styles = _reactNative.StyleSheet.create({
  trigger: {
    flexDirection: 'row',
    position: 'relative',
    alignItems: 'center',
    gap: 8,
    justifyContent: 'space-between',
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 10,
    maxWidth: 400,
    borderWidth: 2,
    borderStyle: 'solid'
  },
  valueText: {
    fontSize: 16
  },
  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: {
    position: 'absolute',
    zIndex: 60,
    borderRadius: 8,
    borderWidth: 1,
    overflow: 'hidden',
    padding: 4,
    minWidth: 180,
    shadowOpacity: 0.15,
    shadowRadius: 12,
    shadowOffset: {
      width: 0,
      height: 4
    },
    // Opt back in from the Portal root's `pointer-events: none`.
    pointerEvents: 'auto'
  },
  item: {
    position: 'relative',
    flexDirection: 'row',
    minHeight: 25,
    paddingLeft: 30,
    paddingRight: 8,
    alignItems: 'center',
    borderRadius: 4,
    paddingVertical: 4
  },
  itemText: {
    fontSize: 14
  },
  itemIndicatorPlaceholder: {
    position: 'absolute',
    left: 0,
    width: 30
  },
  itemIndicatorContainer: {
    position: 'absolute',
    left: 0,
    width: 30,
    alignItems: 'center',
    justifyContent: 'center'
  },
  separator: {
    height: 1,
    marginVertical: 4,
    width: '100%'
  }
});
//# sourceMappingURL=index.web.js.map