import { View, Text, ViewProps, StyleSheet, Button, TouchableOpacity, TextInput } from 'react-native'
import React from 'react'
import { AntDesign } from '@expo/vector-icons';
import { useThemeColor } from '../../../hooks/hooks';
import { SIZES } from '../../../constants/theme';

type SearchBarProps = {placeholder: string} & ViewProps

export default function SearchBar(props: SearchBarProps) {
  const [isActive, setIsactive] = React.useState(false);

  const textColor = useThemeColor("interactiveText")
  const backgroundColor = useThemeColor("containerColor");
  const handleChange = (text:string) : void  =>  {
    if(text !== ""){
      if(!isActive){
        setIsactive(true)
      }
    }else {
      if(isActive){
        setIsactive(false)
      }
    }
  }

//TODO: Handle textCancel
  return (
    <View style={styles.container}>
        <TextInput onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%"}, styles.TextInput]} autoCorrect={false} keyboardType='web-search' placeholder={props.placeholder}></TextInput>
      
        {isActive &&
          <TouchableOpacity style={styles.cancel}>
            <AntDesign size={15} name='closecircle'></AntDesign>
          </TouchableOpacity>
        }
      </View>
  )
}

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 10,
    marginBottom: 20,
    flexDirection: 'row',
    justifyContent: "center",
    alignItems: "center",
    height: 40,
    backgroundColor: backgroundColor,
    borderRadius: 10,
    paddingHorizontal: 10
  },
  TextInput: {
    flex: 1,
    height: "100%",
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row",
    width: "100%",
  },
  cancel:{
    height: "100%", 
    width: 30, 
    justifyContent: "center", 
    alignItems:"center",
  }
})
