"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SettingsListItem = exports.SettingsListGroup = exports.SettingsListDivider = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useTheme = require("../theme/use-theme.js");
var _useInteractionState = require("../hooks/useInteractionState.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); }
// ── Chevron icon (unicode-based, no SVG dependency) ─────────────
const Chevron = /*#__PURE__*/(0, _react.memo)(({
  size = 16,
  color
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
  style: {
    fontSize: size,
    color,
    lineHeight: size,
    textAlign: 'center',
    width: size
  },
  children: '\u203A'
}));
Chevron.displayName = 'Chevron';

// ── SettingsListItem ────────────────────────────────────────────

const SettingsListItem = exports.SettingsListItem = /*#__PURE__*/(0, _react.memo)(function SettingsListItem({
  icon,
  title,
  description,
  value,
  rightElement,
  showChevron,
  destructive = false,
  onPress,
  disabled = false,
  accessibilityLabel,
  accessibilityHint,
  accessibilityRole,
  leftInset
}) {
  const theme = (0, _useTheme.useTheme)();
  const hasChevron = showChevron ?? Boolean(onPress);
  const titleColor = destructive ? theme.colors.error : theme.colors.text;
  const pressedOpacity = disabled ? 1 : 0.6;
  // Drive press-opacity via state, not Pressable's function-form `style`,
  // which NativeWind v4's css-interop swallows.
  const {
    state: pressed,
    onIn: onPressIn,
    onOut: onPressOut
  } = (0, _useInteractionState.useInteractionState)();
  const role = accessibilityRole ?? (onPress ? 'button' : 'none');
  const label = accessibilityLabel ?? title;
  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.itemContainer, leftInset !== undefined ? {
      paddingLeft: leftInset
    } : undefined],
    testID: "settings-list-item-content",
    "data-left-inset": leftInset,
    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.iconContainer,
      children: icon
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: styles.textContainer,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.title, {
          color: titleColor
        }],
        numberOfLines: 1,
        children: title
      }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.description, {
          color: theme.colors.textSecondary
        }],
        numberOfLines: 2,
        children: description
      }) : null]
    }), value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.value, {
        color: theme.colors.textSecondary
      }],
      numberOfLines: 1,
      children: value
    }) : null, rightElement, hasChevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
      size: 16,
      color: theme.colors.textTertiary
    }) : null]
  });
  if (onPress) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
      onPress: onPress,
      onPressIn: disabled ? undefined : onPressIn,
      onPressOut: disabled ? undefined : onPressOut,
      disabled: disabled,
      android_ripple: {
        color: theme.colors.border
      },
      accessibilityRole: role,
      accessibilityLabel: label,
      accessibilityHint: accessibilityHint,
      accessibilityState: disabled ? {
        disabled: true
      } : undefined,
      style: [disabled && styles.disabled, pressed && {
        opacity: pressedOpacity
      }],
      children: content
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    accessibilityRole: role,
    accessibilityLabel: label,
    accessibilityHint: accessibilityHint,
    accessibilityState: disabled ? {
      disabled: true
    } : undefined,
    children: content
  });
});

// ── SettingsListGroup ───────────────────────────────────────────

const SettingsListGroup = exports.SettingsListGroup = /*#__PURE__*/(0, _react.memo)(function SettingsListGroup({
  title,
  footer,
  children,
  style
}) {
  const theme = (0, _useTheme.useTheme)();
  const filteredChildren = _react.default.Children.toArray(children).filter(Boolean);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.groupContainer, style],
    children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.groupTitle, {
        color: theme.colors.textSecondary
      }],
      children: title
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.groupCard, {
        backgroundColor: theme.colors.backgroundSecondary
      }],
      children: filteredChildren.map((child, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
        children: [child, index < filteredChildren.length - 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: [styles.divider, {
            backgroundColor: theme.colors.border,
            opacity: 0.3
          }]
        }) : null]
      }, index))
    }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.groupFooter, {
        color: theme.colors.textTertiary
      }],
      children: footer
    }) : null]
  });
});

// ── SettingsListDivider ─────────────────────────────────────────

const SettingsListDivider = exports.SettingsListDivider = /*#__PURE__*/(0, _react.memo)(function SettingsListDivider({
  inset = 52
}) {
  const theme = (0, _useTheme.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.divider, {
      marginLeft: inset,
      backgroundColor: theme.colors.border,
      opacity: 0.3
    }]
  });
});

// ── Styles ──────────────────────────────────────────────────────

const styles = _reactNative.StyleSheet.create({
  // Item
  itemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 10,
    minHeight: 44,
    gap: 12
  },
  iconContainer: {
    width: 20,
    height: 20,
    alignItems: 'center',
    justifyContent: 'center'
  },
  textContainer: {
    flex: 1
  },
  title: {
    fontSize: 15,
    fontWeight: '500',
    lineHeight: 20
  },
  description: {
    fontSize: 13,
    lineHeight: 17
  },
  value: {
    fontSize: 13,
    lineHeight: 17
  },
  disabled: {
    opacity: 0.5
  },
  // Group
  groupContainer: {
    marginBottom: 16
  },
  groupCard: {
    marginHorizontal: 16,
    borderRadius: 16,
    overflow: 'hidden'
  },
  groupTitle: {
    fontSize: 11,
    fontWeight: '600',
    textTransform: 'uppercase',
    letterSpacing: 0.6,
    paddingHorizontal: 20,
    paddingTop: 4,
    paddingBottom: 6
  },
  groupFooter: {
    fontSize: 12,
    lineHeight: 16,
    paddingHorizontal: 20,
    paddingTop: 6
  },
  // Divider
  divider: {
    height: _reactNative.StyleSheet.hairlineWidth,
    marginLeft: 16
  }
});
//# sourceMappingURL=SettingsList.js.map