"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 _index2 = require("../button/index.js");
var _context = require("../dialog/context.js");
var _SheetShell = require("../dialog/SheetShell.js");
var _index3 = require("../radio-indicator/index.js");
var _useInteractionState = require("../hooks/useInteractionState.js");
var _Chevron = require("../icons/Chevron.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';
const ValueStoreContext = /*#__PURE__*/(0, _react.createContext)([undefined, () => {}]);
ValueStoreContext.displayName = 'SelectValueStoreContext';
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 control = (0, _context.useDialogControl)();
  const valueStoreState = (0, _react.useState)(undefined);
  const ctx = (0, _react.useMemo)(() => ({
    control,
    value,
    onValueChange,
    disabled
  }), [control, value, onValueChange, disabled]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectContext.Provider, {
    value: ctx,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueStoreContext.Provider, {
      value: valueStoreState,
      children: children
    })
  });
}

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

function Trigger({
  children,
  label
}) {
  const {
    control
  } = useSelectContext();
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = (0, _useInteractionState.useInteractionState)();
  const {
    state: pressed,
    onIn: onPressIn,
    onOut: onPressOut
  } = (0, _useInteractionState.useInteractionState)();
  if (typeof children === 'function') {
    return children({
      control,
      state: {
        hovered: false,
        focused,
        pressed
      },
      props: {
        onPress: () => control.open(),
        onFocus,
        onBlur,
        accessibilityLabel: label
      }
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
    accessibilityLabel: label,
    onPress: () => control.open(),
    variant: "secondary",
    size: "large",
    style: styles.triggerButton,
    children: children
  });
}

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

function ValueText({
  placeholder,
  children: extractLabel = defaultExtractLabel,
  style
}) {
  const [storedValue] = (0, _react.useContext)(ValueStoreContext);
  const theme = (0, _useTheme.useTheme)();
  const display = storedValue != null ? extractLabel(storedValue) : placeholder;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
    numberOfLines: 1,
    style: [styles.valueText, {
      color: storedValue != null ? theme.colors.text : theme.colors.textSecondary
    }, ...(style ? [style] : [])],
    children: display
  });
}
function defaultExtractLabel(item) {
  if (item != null && typeof item === 'object' && 'label' in item) {
    return item.label;
  }
  return String(item);
}

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

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

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

function Content({
  items,
  valueExtractor = _common.defaultItemValueExtractor,
  ...props
}) {
  const {
    control,
    ...context
  } = useSelectContext();
  const [, setStoredValue] = (0, _react.useContext)(ValueStoreContext);
  (0, _react.useLayoutEffect)(() => {
    const item = items.find(candidate => valueExtractor(candidate) === context.value);
    if (item !== undefined) {
      setStoredValue(item);
    }
  }, [items, context.value, valueExtractor, setStoredValue]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentInner, {
    control: control,
    items: items,
    valueExtractor: valueExtractor,
    ...props,
    value: context.value,
    onValueChange: context.onValueChange,
    disabled: context.disabled
  });
}
function ContentInner({
  label = 'Select an option',
  items,
  renderItem,
  valueExtractor = _common.defaultItemValueExtractor,
  control,
  ...contextValues
}) {
  const theme = (0, _useTheme.useTheme)();
  const render = (0, _react.useCallback)(({
    item,
    index
  }) => {
    return renderItem(item, index, contextValues.value);
  }, [renderItem, contextValues.value]);
  const ctx = (0, _react.useMemo)(() => ({
    control,
    value: contextValues.value,
    onValueChange: contextValues.onValueChange,
    disabled: contextValues.disabled
  }), [control, contextValues.value, contextValues.onValueChange, contextValues.disabled]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SheetShell.SheetShell, {
    control: control,
    label: label,
    header: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.contentHeader,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
        style: [styles.contentHeaderText, {
          color: theme.colors.text
        }],
        children: label
      })
    }),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectContext.Provider, {
      value: ctx,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
        data: items,
        renderItem: render,
        keyExtractor: valueExtractor,
        style: styles.flatList
      })
    })
  });
}

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

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

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

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

function ItemText({
  children,
  style
}) {
  const {
    selected
  } = (0, _common.useItemContext)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
    style: [styles.itemText, selected && styles.itemTextSelected, ...(style ? [style] : [])],
    children: children
  });
}

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

function ItemIndicator({
  icon: IconComponent
}) {
  const {
    selected
  } = (0, _common.useItemContext)();
  if (IconComponent) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.itemIndicatorIcon,
      children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
        size: "md"
      })
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.RadioIndicator, {
    selected: selected
  });
}

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

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

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

const styles = _reactNative.StyleSheet.create({
  triggerButton: {
    flex: 1,
    justifyContent: 'space-between',
    paddingLeft: 16,
    paddingRight: 12
  },
  valueText: {
    fontSize: 16,
    fontWeight: '400'
  },
  contentHeader: {
    paddingTop: 24,
    paddingBottom: 8,
    paddingHorizontal: 16
  },
  contentHeaderText: {
    fontSize: 20,
    fontWeight: '700',
    textAlign: 'left'
  },
  flatList: {
    flexGrow: 0
  },
  item: {
    flex: 1,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingVertical: 12
  },
  itemText: {
    fontSize: 16
  },
  itemTextSelected: {
    fontWeight: '600'
  },
  itemIndicatorIcon: {
    width: 24
  },
  separator: {
    flex: 1,
    borderBottomWidth: 1,
    marginHorizontal: 16,
    marginVertical: 4
  }
});
//# sourceMappingURL=index.js.map