import React, { useRef } from 'react'
import {
  View,
  TextInput,
  StyleSheet,
  TouchableWithoutFeedback,
  TouchableOpacity,
} from 'react-native'
import { SearchIcon } from '../icons/SearchIcon'

import { Colors, colors } from '../Colors'
import ClearX from '../icons/ClearX'
import { Strings } from '../i18n'

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 44,
    marginTop: 12,
    backgroundColor: colors.midGray,
    borderRadius: 22,
  },
  input: {
    flex: 1,
    color: Colors.text,
    paddingHorizontal: 16,
    fontSize: 16,
  },
  icon: {
    color: colors.gray,
    marginLeft: 16,
    paddingVertical: 22,
  },
  clear: {
    color: colors.gray,
    marginRight: 12,
    paddingVertical: 22,
  },
})

interface Props {
  placeholder?: string
  filter: string
  setFilter: (filter: string) => void
  autoFocus?: boolean
}

export function SearchBar(props: Props) {
  const input = useRef<TextInput>(null)
  const autoFocus = props.autoFocus ?? false
  const focus = () => input.current?.focus()
  return (
    <TouchableWithoutFeedback onPress={focus}>
      <View style={styles.container}>
        <SearchIcon size={22} style={styles.icon} />
        <TextInput
          ref={input}
          autoCorrect={false}
          onChangeText={props.setFilter}
          value={props.filter}
          style={styles.input}
          autoFocus={autoFocus}
          placeholder={props.placeholder ?? Strings.Shared.Search}
        />
        {props.filter ? (
          <TouchableOpacity
            onPress={() => {
              input.current?.clear()
              props.setFilter('')
            }}
          >
            <ClearX size={24} style={styles.clear} />
          </TouchableOpacity>
        ) : null}
      </View>
    </TouchableWithoutFeedback>
  )
}