import { Pressable, StyleSheet, Text, type ViewStyle } from 'react-native'
import type { SFSymbol } from 'sf-symbols-typescript'
import { GREEN, NAVY, RED, TEXT } from '@/src/shared/constants/colors'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { LAYOUT } from '@/src/shared/constants/spacing'

type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'icon'

export interface NativeButtonProps {
  variant?: ButtonVariant
  title?: string
  systemImage?: SFSymbol
  onPress?: () => void
  disabled?: boolean
  color?: string
  controlSize?: 'mini' | 'small' | 'regular' | 'large'
  fullWidth?: boolean
  style?: ViewStyle
  testID?: string
}

export function NativeButton(props: NativeButtonProps) {
  const { variant = 'primary', title, onPress, disabled, fullWidth, style, testID } = props

  const buttonStyle = getVariantStyle(variant)
  const textStyle = getVariantTextStyle(variant)

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={({ pressed }) => [
        styles.base,
        fullWidth && styles.fullWidth,
        buttonStyle,
        pressed && styles.pressed,
        disabled && styles.disabled,
        style,
      ]}
      testID={testID}
    >
      {title ? <Text style={[styles.text, textStyle]}>{title}</Text> : null}
    </Pressable>
  )
}

function getVariantStyle(variant: ButtonVariant): ViewStyle {
  switch (variant) {
    case 'primary':
      return { backgroundColor: GREEN[500] }
    case 'secondary':
      return { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: GREEN[500] }
    case 'ghost':
    case 'destructive':
    case 'icon':
      return { backgroundColor: 'transparent' }
  }
}

function getVariantTextStyle(variant: ButtonVariant) {
  switch (variant) {
    case 'primary':
      return { color: NAVY[900] }
    case 'destructive':
      return { color: RED[500] }
    default:
      return { color: TEXT.PRIMARY }
  }
}

const styles = StyleSheet.create({
  base: {
    height: LAYOUT.BUTTON_HEIGHT,
    borderRadius: RADIUS.MD,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: LAYOUT.TOUCH_TARGET,
  },
  fullWidth: {
    width: '100%',
  },
  text: {
    fontSize: 15,
    fontWeight: '600',
    textAlign: 'center',
  },
  pressed: {
    opacity: 0.8,
    transform: [{ scale: 0.98 }],
  },
  disabled: {
    opacity: 0.4,
  },
})
