import React from 'react';
import {
    StyleSheet,
    Button,
    TextInput,
    View
} from 'react-native';
import IpuRnFun from './ipu_rn'

export default class PhoneNumber extends React.Component {

    constructor(props) {
        super(props);
        this.state = {content:"请填写号码"}
    }

    render() {
        let _this = this;
        const openContactsByPlugin = () => {
            IpuRnFun.openContactsByPlugin(
              (result) => {
                this.setState({content:result})
              },
              (error) => {
                console.error(error)
              }
            )
        };
        const finish = () => {
            var content = this.state.content;
            if (content == "请填写号码") {
               IpuRnFun.finish()
            } else {
               IpuRnFun.finish(content)
            }
        };
        const openContacts = () => {
            IpuRnFun.openContacts(
              (result) => {
                  this.setState({content:result})
              },
              (error) => {
                  console.error(error)
              }
          )
        };
        const dismissRNViewController = () => {
          var content = this.state.content;
          if (content == "请填写号码") {
             IpuRnFun.dismissRNViewController()
          } else {
             IpuRnFun.dismissRNViewController(this.state.content)
          }
        }

        return (
            <View style={styles.container}>
                <TextInput style={styles.input} underlineColorAndroid="transparent" value={this.state.content}
                    onChangeText={(text) => this.setState({content:text})} />
                <View style={styles.buttons}>
                    <Button title="通讯录" onPress={openContacts} />
                    <Button title="确认" onPress={dismissRNViewController} />
                </View>
                <View style={styles.buttons}>
                    <Button title="通讯录Plugin" onPress={openContactsByPlugin} />
                    <Button title="确认Plugin" onPress={finish} />
                </View>
            </View>
        )
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    input: {
        margin:10,
        backgroundColor:'#ffffff',
        color:'#000000',
    },
    buttons: {
        margin:10,
        flexDirection:'row',
        justifyContent: 'space-around',
    }
});