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

export interface Props {
    headerText?: string
    options: Array<string>
}

export interface State {
    visible: boolean
}

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


    }
    componentDidMount() {
    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {
        visible: false
    }

    public sheetRef = null
    public height = px2dp(390)

    rennderItem = (item, index) => {
        return (
            <TouchableOpacity style={styles.itemLine} key={index}>
                <Text>{item}</Text>
            </TouchableOpacity>
        )
    }
    renderContent = () => {
        let { options } = this.props;
        let contentNum = options.length
        return (
            <
                >
                {
                    options && options.map(this.rennderItem)
                }

                <TouchableOpacity style={[styles.itemLine,]} onPress={this.hide}>
                    <Text>关闭</Text>
                </TouchableOpacity>
            </ >

        )

    }



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

    hide = () => {
        this.snapTo(2)
    }

    header = () => {
        let { headerText } = this.props;
        return (
            <View style={styles.headerStyle}>
                <Text style={{ fontSize: 12 }}>{headerText ? headerText : "请选择"}</Text>
            </View>
        )
    }


    render() {

        let { options } = this.props;
        let { visible } = this.state;

        return (


            <BottomSheet
                renderHeader={this.header}
                ref={c => { this.sheetRef = c }}
                // snapPoints={[450, 300, 0]}

                snapPoints={[this.height, px2dp(45) * 2, 0]}
                // borderRadius={10}
                initialSnap={2}
                renderContent={this.renderContent}
                enabledBottomClamp
            />

        );

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

    },
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },

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