"use strict";

import React, { createContext, useContext, useId, useMemo, 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 { useInteractionState } from "../hooks/useInteractionState.js";
import { ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon } from "../icons/Chevron.js";
import { Check_Stroke2_Corner0_Rounded as CheckIcon } from "../icons/Check.js";
import { defaultItemValueExtractor, ItemContext, useItemContext } from "./common.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export { useItemContext };

// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------

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

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

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

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

export function Trigger({
  children,
  label
}) {
  const ctx = useSelectContext();
  const theme = useTheme();
  const triggerId = useId();
  const {
    state: hovered,
    onIn: onMouseEnter,
    onOut: onMouseLeave
  } = useInteractionState();
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = 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__*/_jsx(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
// ---------------------------------------------------------------------------

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

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

export function Icon({
  style
}) {
  const theme = useTheme();
  return /*#__PURE__*/_jsx(ChevronDownIcon, {
    style: style,
    size: "xs",
    fill: theme.colors.textSecondary
  });
}

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

export function Content({
  items,
  renderItem,
  label = 'Select an option',
  valueExtractor = defaultItemValueExtractor
}) {
  const ctx = useSelectContext();
  const theme = useTheme();
  if (!ctx.isOpen) return null;
  return /*#__PURE__*/_jsxs(Portal, {
    children: [/*#__PURE__*/_jsx(Pressable, {
      style: styles.backdrop,
      onPress: ctx.close,
      accessibilityLabel: "Close selection"
    }), /*#__PURE__*/_jsx(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__*/_jsx(React.Fragment, {
        children: renderItem(item, index, ctx.value)
      }, valueExtractor(item)))
    })]
  });
}

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

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

export function Item({
  ref,
  value,
  children,
  style
}) {
  const theme = useTheme();
  const ctx = useSelectContext();
  const {
    state: hovered,
    onIn: onMouseEnter,
    onOut: onMouseLeave
  } = useInteractionState();
  const {
    state: focused,
    onIn: onFocus,
    onOut: onBlur
  } = useInteractionState();
  const isSelected = ctx.value === value;
  const itemCtx = useMemo(() => ({
    selected: isSelected,
    hovered,
    focused,
    pressed: false
  }), [isSelected, hovered, focused]);
  return /*#__PURE__*/_jsx(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__*/_jsx(ItemContext.Provider, {
      value: itemCtx,
      children: children
    })
  });
}

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

export function ItemText({
  children,
  style
}) {
  return /*#__PURE__*/_jsx(Text, {
    style: [styles.itemText, ...(style ? [style] : [])],
    children: children
  });
}

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

export function ItemIndicator({
  icon: IconComponent = CheckIcon
}) {
  const {
    selected
  } = useItemContext();
  if (!selected) {
    return /*#__PURE__*/_jsx(View, {
      style: styles.itemIndicatorPlaceholder
    });
  }
  return /*#__PURE__*/_jsx(View, {
    style: styles.itemIndicatorContainer,
    children: /*#__PURE__*/_jsx(IconComponent, {
      size: "sm"
    })
  });
}

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

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

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

const styles = 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