import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons";
import { useState } from "react";
import { TouchableOpacity } from "react-native";
import { InputForm } from "./inputForm";

export default function InputSearch({ onChange, width, value, bg }: { onChange?: (val: string) => void, width?: number, value?: string, bg?: string }) {
   const { colors } = useTheme();
   const [internalValue, setInternalValue] = useState(value ?? "");

   const displayValue = value !== undefined ? value : internalValue;

   const handleChange = (val: string) => {
      setInternalValue(val);
      onChange?.(val);
   };

   const handleClear = () => {
      setInternalValue("");
      onChange?.("");
   };

   return (
      <InputForm
         type="default"
         placeholder="Pencarian"
         round
         itemLeft={<Feather name="search" size={20} color={colors.dimmed} />}
         itemRight={
            displayValue ? (
               <TouchableOpacity onPress={handleClear}>
                  <Feather name="x" size={20} color={colors.dimmed} />
               </TouchableOpacity>
            ) : undefined
         }
         onChange={handleChange}
         width={width}
         bg={bg}
         value={displayValue}
         mb={false}
      />
   )
}