import React, {Fragment} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    Button,
    Image,
    StatusBar,
    ProgressBarAndroid,
    Alert,
} from 'react-native';
import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import ImagePicker from 'react-native-image-picker';

const options = {
    title: '选择图片',
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择照片',
    // customButtons: [
    //     {name: 'fb', title: 'Choose Photo from Facebook'},
    // ],
    cameraType: 'back',
    mediaType: 'photo',
    videoQuality: 'high',
    durationLimit: 10,
    maxWidth: 300,
    maxHeight: 300,
    quality: 0.8,
    angle: 0,
    allowsEditing: false,
    noData: false,
    storageOptions: {
        skipBackup: true
    }
};

class App1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {avatarSource: null, progress: 4, proOpacity: 0}
    }

    startSelect() {
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                const source = {uri: response.uri};

                // You can also display the image using data:
                // const source = { uri: 'data:image/jpeg;base64,' + response.data };

                this.setState({
                    avatarSource: source,
                });
                this.state.progress = 0;
                this.setState({proOpacity: 10});
                const inter = setInterval(
                    () => {
                        const progress = (this.state.progress + 0.02) % 1;
                        console.log(progress);
                        if (progress >= 0.978) {
                            Alert.alert(
                                '提示',
                                '上传成功 ！', [
                                    {text: 'OK'},
                                ],);
                            this.setState({progress: 10});
                            this.setState({proOpacity: 0});
                            clearInterval(inter);
                        }
                        this.setState({progress: progress});
                    }, 100
                );
            }
        });
    }

    render() {
        return (
            <Fragment>
                <StatusBar barStyle="dark-content"/>
                <SafeAreaView>
                    <ScrollView
                        contentInsetAdjustmentBehavior="automatic"
                        style={styles.scrollView}>
                        <Text style={{
                            width: "100%",
                            height: 48,
                            textAlign: "center",
                            lineHeight: 48,
                            fontSize: 14,
                            borderBottomWidth: 1,
                            borderBottomColor: '#dedede'
                        }}>图片部分</Text>
                        <View style={{textAlign: "center", height: '100%', width: "80%", marginLeft: '10%'}}>
                            <ProgressBarAndroid
                                styleAttr="Horizontal"
                                progress={this.state.progress}
                                style={{opacity: this.state.proOpacity}}
                                indeterminate={false}/>
                            <View style={{height: 20}}/>
                            <View style={{flexDirection: "row"}}>
                                <View style={{flex: 1}}/>
                                <Image source={this.state.avatarSource} style={styles.uploadAvatar}/>
                                <View style={{flex: 1}}/>
                            </View>
                            <View style={{height: 20}}/>
                            <Button title="选择图片并上传"
                                    onPress={() => this.startSelect()}
                                    style={{
                                        marginTop: 20,
                                        marginBottom: 20,
                                        marginLeft: 60,
                                        marginRight: 60
                                    }}> </Button>
                        </View>
                    </ScrollView>
                </SafeAreaView>
            </Fragment>
        );
    }

};
const styles = StyleSheet.create({
    uploadAvatar: {
        width: 100, height: 100,
        backgroundColor: "red",
        flex: 2
    },
    scrollView: {
        backgroundColor: "#ffffff",
    },
    engine: {
        position: 'absolute',
        right: 0,
    },
    body: {
        backgroundColor: "#ffffff",
    },
    sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
    },
    sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
        color: Colors.black,
    },
    sectionDescription: {
        marginTop: 8,
        fontSize: 18,
        fontWeight: '400',
        color: Colors.dark,
    },
    highlight: {
        fontWeight: '700',
    },
    footer: {
        color: Colors.dark,
        fontSize: 12,
        fontWeight: '600',
        padding: 4,
        paddingRight: 12,
        textAlign: 'right',
    },
});
export default App1;