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
  value?: string
}

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

  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)
    }

  }

  // 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, props.style]}>
        <TextInput placeholderTextColor={colors.secondaryText} onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%", color:colors.primaryText}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={props.value} onEndEditing={()=>setIsactive(false)}/>
      
        {isActive &&
          <TouchableOpacity style={styles.cancel} onPress={()=>{
            console.log("cancel")
            handleChange("")}}>
            <AntDesign size={15} name='closecircle' color={colors.primaryText}></AntDesign>
          </TouchableOpacity>
        }
      </View>
  )
}

const styles = StyleSheet.create({
  container: {
    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",
  }
})
