import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, Button } from 'react-native'
import BottomSheet from 'reanimated-bottom-sheet';
import { px2dp } from '../../utils/base';

export interface Props {
    headerText?: string
}

export interface State {

}

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

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {

    }

    public sheetRef = null
    renderContent = () => (
        <View
            style={{
                backgroundColor: 'white',
                padding: 16,
                height: 450,
            }}
        >
            <Text>Swipe down to close</Text>
        </View>
    );

    snapTo = (item: number) => {
        this.sheetRef.snapTo(item)
        console.log(99)
    }

    header = () => {
        let { headerText } = this.props;
        return (
            <View style={styles.headerStyle}>
                <Text>{headerText}</Text>
            </View>
        )
    }


    render() {
        return (
            <>
                <View
                    style={{
                        flex: 1,
                        backgroundColor: 'papayawhip',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                >
                    {/* <Button
                        title="Open Bottom Sheet"
                        onPress={() => this.sheetRef.current.snapTo(0)}
                    /> */}
                </View>
                <BottomSheet
                    renderHeader={this.header}
                    ref={c => { this.sheetRef = c }}
                    // snapPoints={[450, 300, 0]}
                    snapPoints={[400, 250, 0]}
                    // borderRadius={10}
                    initialSnap={2}
                    renderContent={this.renderContent}
                />
            </>
        );

    }
}
const styles = StyleSheet.create({
    main: {

    },

    headerStyle: {
        height: px2dp(45),
        width: "100%",
        justifyContent: "center",
        alignItems: 'center',
        backgroundColor: "#fff",
        borderTopLeftRadius: px2dp(15),
        borderTopRightRadius: px2dp(15)
    }
})