import { AntDesign } from '@expo/vector-icons';
import React, { useState } from 'react';
import { StyleSheet, TextInput, TouchableOpacity, View, ViewProps } from 'react-native';
import { SIZES } from '../../constants/theme';
import { useTheme } from '../../app/contexts/ThemeContext';

interface SearchBarProps extends ViewProps {
  placeholder? : string;
  onChangeText? : (text: string) => void | undefined
}

export default function TextInputBar(props: SearchBarProps) {
  const [isActive, setIsactive] = React.useState(false);
  const { colors } = useTheme();
  const [text, setText] = useState<string>("");

  const textColor = colors
  const backgroundColor = colors.elementDefaultColor;

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

  // 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='default' placeholder={props.placeholder} value={text}/>
      
        {isActive &&
          <TouchableOpacity style={styles.cancel} onPress={()=>{handleChange("")}}>
            <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",
  }
})