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

type SearchBarProps = {placeholder: string} & ViewProps

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

  const textColor = useThemeColor("interactiveText")
  const backgroundColor = useThemeColor("elementDefaultColor");

  const handleChange = (text:string) : void  =>  {
    if(text !== ""){
      if(!isActive){
        setIsactive(true)
      }
    }else {
      if(isActive){
        setIsactive(false)
      }
    }
  }

  // cant apply the background color otherwise
  const containerStyle = {
    ...styles.container,
    backgroundColor: backgroundColor // apply dynamic background color
  };

  //TODO: Handle textCancel
  // changed styles.container to containerStyle
  return (
    <View style={containerStyle}>
        <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,
    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",
  }
})