import React, { useEffect, useState } from 'react';
import { TextInput, Alert, NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
import { Cfg } from './action';
import { cfg } from '../lib/cfg';

export function InputRenderer({
    ...props
}: {
    [key: string]: any;
}) {
    const onPress = () => Alert.alert('pressed!');
    const [val, setVal] = useState('')
    const { tnode } = props;
    const { domNode } = tnode;
    const { attribs } = domNode;

    const handleChange = (event:any) => {
        const config = Cfg.action as { [key: string]: (event: Function) => void };
        const custAction: ((event: Function) => void) | null =
            (attribs?.action && typeof config[attribs?.action] === 'function')
                ? config[attribs?.action]
                : null;
        if (custAction){
            custAction(event); // Pass only the event
        }
    }


    useEffect(() => {
        console.log("properti ini", props)
    }, [])

    return (
        <TextInput 
            id={attribs.id ? attribs.id : 'randoom-' + Date.now()} 
            placeholder={attribs?.placeholder} 
            keyboardType="default" 
            textContentType="none"
            onTextInput={(text:any)=>{
                setVal(text)
                if (cfg.inputChange[attribs?.change] && typeof cfg.inputChange[attribs?.change] === 'function'){
                    cfg.inputChange[attribs?.change]()
                }
            }}
            style={props.style} 
            value={val}
        />
    );
}