"use strict";

import React, { memo } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { useInteractionState } from "../hooks/useInteractionState.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// ── Chevron icon (unicode-based, no SVG dependency) ─────────────
const Chevron = /*#__PURE__*/memo(({
  size = 16,
  color
}) => /*#__PURE__*/_jsx(Text, {
  style: {
    fontSize: size,
    color,
    lineHeight: size,
    textAlign: 'center',
    width: size
  },
  children: '\u203A'
}));
Chevron.displayName = 'Chevron';

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

export const SettingsListItem = /*#__PURE__*/memo(function SettingsListItem({
  icon,
  title,
  description,
  value,
  rightElement,
  showChevron,
  destructive = false,
  onPress,
  disabled = false,
  accessibilityLabel,
  accessibilityHint,
  accessibilityRole,
  leftInset
}) {
  const theme = 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
  } = useInteractionState();
  const role = accessibilityRole ?? (onPress ? 'button' : 'none');
  const label = accessibilityLabel ?? title;
  const content = /*#__PURE__*/_jsxs(View, {
    style: [styles.itemContainer, leftInset !== undefined ? {
      paddingLeft: leftInset
    } : undefined],
    testID: "settings-list-item-content",
    "data-left-inset": leftInset,
    children: [icon ? /*#__PURE__*/_jsx(View, {
      style: styles.iconContainer,
      children: icon
    }) : null, /*#__PURE__*/_jsxs(View, {
      style: styles.textContainer,
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.title, {
          color: titleColor
        }],
        numberOfLines: 1,
        children: title
      }), description ? /*#__PURE__*/_jsx(Text, {
        style: [styles.description, {
          color: theme.colors.textSecondary
        }],
        numberOfLines: 2,
        children: description
      }) : null]
    }), value ? /*#__PURE__*/_jsx(Text, {
      style: [styles.value, {
        color: theme.colors.textSecondary
      }],
      numberOfLines: 1,
      children: value
    }) : null, rightElement, hasChevron ? /*#__PURE__*/_jsx(Chevron, {
      size: 16,
      color: theme.colors.textTertiary
    }) : null]
  });
  if (onPress) {
    return /*#__PURE__*/_jsx(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__*/_jsx(View, {
    accessibilityRole: role,
    accessibilityLabel: label,
    accessibilityHint: accessibilityHint,
    accessibilityState: disabled ? {
      disabled: true
    } : undefined,
    children: content
  });
});

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

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

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

export const SettingsListDivider = /*#__PURE__*/memo(function SettingsListDivider({
  inset = 52
}) {
  const theme = useTheme();
  return /*#__PURE__*/_jsx(View, {
    style: [styles.divider, {
      marginLeft: inset,
      backgroundColor: theme.colors.border,
      opacity: 0.3
    }]
  });
});

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

const styles = 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: StyleSheet.hairlineWidth,
    marginLeft: 16
  }
});
//# sourceMappingURL=SettingsList.js.map