import { useRef } from 'react'
import { Pressable, StyleSheet, TextInput, View } from 'react-native'
import { Icon } from '../../../components'
import { AutoFocusAwareTextInput } from '../../../components/display/text_input'
import { useTheme } from '../../../hooks'

const PLACEHOLDER = 'Search titles and messages'

interface SearchFieldProps {
  term: string
  onChange: (term: string) => void
}

export function SearchField({ term, onChange }: SearchFieldProps) {
  const styles = useStyles()
  const { colors } = useTheme()
  const inputRef = useRef<TextInput>(null)

  const clear = () => {
    onChange('')
    inputRef.current?.clear()
    inputRef.current?.focus()
  }

  return (
    <View style={styles.container}>
      <View style={styles.field}>
        <Icon name="general.search" size={16} color={colors.iconColorDefaultSecondary} />
        <AutoFocusAwareTextInput
          autoFocus
          autoCorrect={false}
          inputRef={inputRef}
          placeholder={PLACEHOLDER}
          placeholderTextColor={colors.textColorDefaultPlaceholder}
          accessibilityLabel={PLACEHOLDER}
          value={term}
          onChangeText={onChange}
          returnKeyType="search"
          style={styles.input}
        />
        {term.length > 0 && (
          <Pressable
            onPress={clear}
            hitSlop={8}
            accessibilityRole="button"
            accessibilityLabel="Clear search"
          >
            <Icon name="general.x" size={12} color={colors.iconColorDefaultSecondary} />
          </Pressable>
        )}
      </View>
    </View>
  )
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    container: {
      paddingHorizontal: 16,
      paddingVertical: 8,
    },
    field: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
      borderWidth: 1,
      borderColor: colors.borderColorDefaultBase,
      borderRadius: 8,
      paddingHorizontal: 12,
      paddingVertical: 8,
    },
    input: {
      flex: 1,
      color: colors.textColorDefaultPrimary,
      fontSize: 16,
      paddingVertical: 2,
    },
  })
}