import { type ViewStyle, View, StyleSheet } from 'react-native'
import { NAVY, BORDER_COLORS } from '@/src/shared/constants/colors'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'

export interface NativeListProps {
  children: React.ReactNode
  style?: ViewStyle
  scrollEnabled?: boolean
  height?: number
  /** Remove default margin (for embedding inside other containers) */
  inset?: boolean
  testID?: string
}

export function NativeList(props: NativeListProps) {
  const { children, style, height, inset = true } = props
  return (
    <View style={[
      styles.list,
      !inset && styles.noInset,
      height ? { height } : undefined,
      style,
    ]}>
      {children}
    </View>
  )
}

export function calculateListHeight(rows: number, sections: number = 1): number {
  return rows * LAYOUT.LIST_ROW_HEIGHT + sections * LAYOUT.LIST_HEADER_HEIGHT + 20
}

/** Thin iOS-style separator for use between list rows */
export function ListSeparator() {
  return (
    <View style={styles.separatorOuter}>
      <View style={styles.separator} />
    </View>
  )
}

const styles = StyleSheet.create({
  list: {
    marginHorizontal: LAYOUT.SCREEN_PADDING,
    backgroundColor: NAVY[800],
    borderRadius: RADIUS.LG,
    borderCurve: 'continuous',
    overflow: 'hidden',
  },
  noInset: {
    marginHorizontal: 0,
  },
  separatorOuter: {
    paddingLeft: SPACING[4],
  },
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: BORDER_COLORS.SEPARATOR,
  },
})
