import React from 'react';
import { TouchableOpacity, Alert, Text, GestureResponderEvent } from 'react-native';
import RenderHtml, { TChildrenRenderer } from 'react-native-render-html';
import { Cfg } from './action';
import { cfg } from '../lib/cfg';

export function ButtonRenderer({
    ...props
}: {
    [key: string]: any;
}) {
    const { tnode } = props;
    const { domNode } = tnode;
    const { attribs } = domNode;
    
    const onPress = () => {
        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){
            attribs.pop = custAction;
            custAction(attribs);
        }
    }
    
    return (
        <TouchableOpacity
            style={props?.style}
            onPress={onPress}
            accessibilityLabel="Learn more about this purple button"
        >
            <Text style={[props?.style, { textAlign: 'center' }]}>
                <TChildrenRenderer tchildren={props.tnode.children} />
            </Text>
        </TouchableOpacity>
    );
}