import React, { Component } from 'react'
import { StyleSheet, View, Text, Image } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler';
import { px2dp } from '../../utils/base';
export interface Props {
    route?: {
        params?: {
            isLongPress?: boolean

        }
    },
    children?: Array<JSX.Element>
}

export interface State {

}

export default class ActionButton extends React.Component<Props, State> {
    constructor(props: Props | Readonly<Props>) {
        super(props);

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {

    }

    public isLongPress: boolean = false
    public btnData = [{ title: "画笔" }, { title: "分享" }, { title: "其他" }]

    onPress = (index: number) => {
        console.log(index)
    }

    renderContainer = () => {
        let { children } = this.props;

        return (
            <>
                {/* {
                    children ? children.map((item, index) => {

                    })
                        : <Text>暂无按钮</Text>
                } */}
                {
                    this.btnData && this.btnData.map((item, index) =>
                        <TouchableOpacity style={styles.btnStyle} key={index} onPress={() => this.onPress(index)}>
                            <Text>{item && item.title}</Text>
                        </TouchableOpacity>
                    )
                }
            </>
        )
    }

    show = () => {
        console.log("我要打印了")

    }

    render() {
        return (
            // <View >

            //     <TouchableOpacity style={styles.main} onPress={() => this.show
            //     }>

            //         <Text>111</Text>

            //     </TouchableOpacity>
            //     <Animated.View style={styles.buttonGroup}>

            //         <TouchableOpacity style={styles.btnStyle} onPress={() => this.onPress(1)}>
            //             <Text>111</Text>
            //         </TouchableOpacity>
            //     </Animated.View>

            // </View>
            <TouchableOpacity style={styles.btnStyle} onPress={() => console.log(111)}>
                <Text>111</Text>
            </TouchableOpacity>

        );

    }
}
const styles = StyleSheet.create({
    main: {
        width: px2dp(60),
        height: px2dp(60),
        backgroundColor: "blue"
    },
    buttonGroup: {
        width: px2dp(60),
        height: px2dp(180)
    },
    btnStyle: {
        width: px2dp(60),
        height: px2dp(60),
        backgroundColor: 'red'
    }
})