import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  Picker,
  TouchableOpacity,
  TouchableHighlight,
} from "react-native";
import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';
import Size from "../../config/size";
import Icon from "react-native-vector-icons/dist/Ionicons";
import { observer, inject } from "mobx-react/native";
import { observable } from "mobx";
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
import AsyncStorageHelper from "../../config/asyncStorageHelper";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import { width, height } from "../../config/screen";
import language from "../../config/language";
import theme from "../../config/colors";
const asyncStorageHelper = new AsyncStorageHelper();
const size = new Size();
var radio_language = [
  {label: 'English', value: 'english'},
  {label: 'Chinese', value: 'chinese' }
];
@inject(["menuStore"], ["userStore"])
@observer
export default class Language extends Component {
  //language = 'english'
  static navigationOptions = {
    drawerLabel: "Settings",
    swipeEnabled: false,
    tabBarLabel: language.en.setting,
  };
  state = { language: "chinese",
  initial:0
 };
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }

  componentWillMount() {
    this.setState({ language: this.userStore.languageSelection });
    if(this.userStore.languageSelection == 'chinese'){
      this.setState({initial:1})
    }else if (this.userStore.languageSelection == 'english'){
      this.setState({initial:0})
    }
    console.log(this.state.language);
  }

  updateUser(language) {
    this.userStore.saveLanguage(language);
    this.setState({ language: language });
  }
  backAction() {
    console.log('back')
    this.props.navigation.goBack();
  }

  render() {
    return (
      <SafeAreaView style={{ backgroundColor: theme.mainColor, flex: 1 }}>
        <View style={styles.container}>
         
            <Icon
             onPress={() => {this.backAction()}}
              name="ios-arrow-back-outline"
              size={size.getSize(40)}
              color={"black"}
            />
       
          {/* <Picker
            selectedValue={this.state.language}
            style={{ height: 50, width: 100 }}
            onValueChange={(itemValue, itemIndex) => {
              this.updateUser(itemValue);
            }}
          >
            <Picker.Item label="中文" value="chinese" />
            <Picker.Item label="English" value="english" />
          </Picker> */}
          <RadioForm
          style = {{paddingTop: verticalScale(50),}}
          radio_props={radio_language}
          initial={this.state.initial}
          onPress={(value) => {this.updateUser(value)}}/>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white"
  },
  flatViewContainer: {
    height: "100%",
    width: "100%",
    alignItems: "center",
    marginTop: 20
  },
  textView: {
    marginLeft: scale(15),
    marginBottom: scale(5)
  }
});