import React from 'react';
import { TouchableOpacity, Alert, Text, GestureResponderEvent, View, Dimensions } from 'react-native';
import RenderHtml, { TChildrenRenderer } from 'react-native-render-html';
import {
    LineChart,
    BarChart,
    PieChart,
    ProgressChart,
    ContributionGraph,
    StackedBarChart
} from "react-native-chart-kit";
import { Cfg } from './action';

export function ChartRenderer({
    ...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 (
        <View>
            <LineChart
                data={{
                    labels: ["January", "February", "March", "April", "May", "June"],
                    datasets: [
                        {
                            data: [
                                Math.random() * 100,
                                Math.random() * 100,
                                Math.random() * 100,
                                Math.random() * 100,
                                Math.random() * 100,
                                Math.random() * 100
                            ]
                        }
                    ]
                }}
                width={Dimensions.get("window").width - (attribs.min ? Number(attribs.min) : 40)} // from react-native
                height={220}
                yAxisLabel="Rp"
                yAxisSuffix="k"
                yAxisInterval={1} // optional, defaults to 1
                chartConfig={{
                    backgroundColor: "#e26a00",
                    backgroundGradientFrom: "#fb8c00",
                    backgroundGradientTo: "#ffa726",
                    decimalPlaces: 2, // optional, defaults to 2dp
                    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                    style: {
                        borderRadius: 16
                    },
                    propsForDots: {
                        r: "6",
                        strokeWidth: "2",
                        stroke: "#ffa726"
                    }
                }}
                bezier
                style={{
                    marginVertical: 8,
                    borderRadius: 16
                }}
            />
        </View>
    );
}