import { Input, View } from "@tarojs/components";
import './Inputs.scss'
import { useEffect, useState } from "react";
import { ColorType } from "@/context/themes/color";
import { IconClear } from "../basic/Icons";

interface CustomInputProps {
    placeholder?: string;
    value: string;
    onChange: (value: string) => void;
    onConfirm: Function,
    openType?:string;
    disabled?: boolean;
    isSecure?: boolean;
}

export default function Component({
    placeholder,
    value,
    onChange,
    onConfirm,
    openType,
    disabled,
    isSecure
}: CustomInputProps) {
    const [inputValue, setInputValue] = useState(value ? value : '');
    const [isFocus, setIsFocus] = useState(false)
    const handleInputChange = (e: any) => {
        const newValue = e.target.value;
        setInputValue(newValue);
        onChange(newValue);
    };

    useEffect(()=>{
        setInputValue(value?value:'')
    },[value])

    function clear(){
        setInputValue('')
        onChange('')
    }
    return (
        <View className="input_bg">
            <Input className={isFocus ? "input input_focus" : "input"}
                // style={{backgroundColor:'red'}}
                placeholder={placeholder ? placeholder : ''}
                value={inputValue}
                secureTextEntry={isSecure ? true : false}
                textContentType={isSecure ? 'password' : 'none'}
                type={openType?openType:'text'}
                onInput={handleInputChange}
                // onConfirm={() => onConfirm()}
                focus
                confirmType="done"
                selectionColor={global.fastColor ? global.fastColor : ColorType.fast}
                disabled={disabled ? disabled : false}
                onFocus={() => {
                    setIsFocus(true)
                }}
                onBlur={() => {
                    setIsFocus(false)
                }}
            />
            {
                inputValue.length > 0 && <View className="clear_bg" onClick={clear}>
                    <IconClear />
                </View>
            }
        </View>
    )
}