import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  Dimensions,
  TextInput,
  Alert,
  AsyncStorage
} from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";
import post from "../../utils/fetch";

export default class Home extends Component {
  static navigationOptions = ({ navigation }) => {
    const { state, setParams, navigate } = navigation;
    return {
      headerRight: (
        <TouchableOpacity
          style={{ marginRight: 13 }}
          onPress={() => state.params.submit()}
        >
          <Text style={{fontSize: 16,color: "#0071E1"}}>提交</Text>
        </TouchableOpacity>
      )
    };
  };
  constructor(props) {
    super(props);
    this.state = {
      content: "",
      IS_LOGIN: "",
      USER_ID: "",
    };
  }
  componentWillMount() {
    this.getAsyncStorage();
  }

  componentDidMount() {
    this.props.navigation.setParams({
      submit: this.submit.bind(this)
    });
  }
  
  getAsyncStorage() {
    const that = this;
    AsyncStorage.multiGet(
      ["IS_LOGIN", "USER_ID"],
      (err, result) => {
        if (err) {
          console.error(err);
        }
        that.setState({
          IS_LOGIN: result[0][1],
          USER_ID: result[1][1] != null ? result[1][1] : "",
        });
      }
    );
  }

  submit() { 
    const { goBack } = this.props.navigation;
    if(!this.state.content){
      Alert.alert("请填写评论内容");
    } else {
      Alert.alert("提交成功",null,() => goBack());
    }
   }

  getListData() {
    post("/test/insurance/article", {}, res => {}, err => {});
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        {/* <Text>评价页面</Text> */}
        <View style={styles.inputContaier}>
          <TextInput
            style={styles.contentInput}
            placeholder="填写评价内容"
            onChangeText={content => this.setState({ content })}
            value={this.state.content}
            autoCapitalize="none"
            multiline={true}
            selectionColor="#1B9341"
            clearButtonMode="always"
            keyboardType="default"
            enablesReturnKeyAutomatically={true}
            returnKeyType="send"
            onSubmitEditing={() => {
              Keyboard.dismiss();
            }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "stretch",
    backgroundColor: "#EFEFEF"
  },
  inputContaier: {
    backgroundColor: "white",
    paddingHorizontal: 15,
    paddingVertical: 10,
    marginVertical: 20,
    marginHorizontal: 15,
    borderStyle: "solid",
    borderColor: "#EFEFEF",
    borderTopWidth: 1,
    flex: 1,
    borderRadius: 8,
  },
  contentInput: {
    fontSize: 15,
    paddingTop: 8,
    paddingBottom: 7,
    flex: 1,
  },
});