/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  TextInput,
  Button,
  StatusBar,
  Modal,
  ScrollView,
  TouchableHighlight,
  DeviceEventEmitter,
  findNodeHandle,
  UIManager
} from "react-native";

import CitysData from "../../data/citys.json";

type Props = {};
export default class GradeSelectionModal extends Component<Props> {
  state = {
    modalVisible: false,
    grade_data: [
      "一年级",
      "二年级",
      "三年级",
      "四年级",
      "五年级",
      "六年级",
      "七年级",
      "八年级",
      "九年级"
    ]
  };

  render() {
    return (
      <Modal
        // animationType="fade"
        animationType="none"
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          this.setState({ modalVisible: false });
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <View
            style={{
              width: "92%",
              backgroundColor: "white",
              height: "80%",
              borderRadius: 20,
              flexDirection: "column",
              overflow: "hidden",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <View
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center"
              }}
            >
              <Text
                style={{
                  textAlign: "center",
                  fontSize: 22,
                  color: "rgba(58, 58, 58, 1)"
                }}
              >
                我所在的年级
              </Text>
            </View>
            <View
              style={{
                flex: 3,
                width: "100%",
                marginTop: 5
              }}
            >
              {this.centerView()}
            </View>
            <View style={{ flex: 2, width: "90%" }}>
              <ImageBackground
                source={require("../images/userInfo/logoutbg1.png")}
                style={{
                  flex: 1,
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center",
                  height: "100%"
                }}
                imageStyle={{
                  resizeMode: "contain"
                }}
              >
                <TouchableOpacity
                  style={{
                    width: "100%",
                    alignItems: "center",
                    height: "40%",
                    justifyContent: "center"
                  }}
                  activeOpacity={1}
                  onPress={() => this.commit()}
                >
                  <Text
                    style={{
                      fontSize: 30,
                      color: "white",
                      width: "100%",
                      textAlign: "center"
                    }}
                  >
                    确定
                  </Text>
                </TouchableOpacity>
              </ImageBackground>
            </View>
            <View style={{ flex: 0.5 }} />
          </View>
        </View>
      </Modal>
    );
  }

  centerView() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          alignItems: "center"
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "space-between",
            width: "90%",
            flexDirection: "row"
          }}
        >
          <TouchableOpacity
            onPress={() => this.clickGrade()}
            style={styles.item}
          >
            <Text style={styles.item_text}>一年级</Text>
          </TouchableOpacity>
          <View style={styles.item}>
            <Text style={styles.item_text}>二年级</Text>
          </View>
          <View style={styles.item}>
            <Text style={styles.item_text}>三年级</Text>
          </View>
        </View>
        <View
          style={{
            flex: 1,
            justifyContent: "space-between",
            width: "90%",
            flexDirection: "row"
          }}
        >
          <View style={styles.item}>
            <Text style={styles.item_text}>四年级</Text>
          </View>
          <View style={styles.item}>
            <Text style={styles.item_text}>五年级</Text>
          </View>
          <View style={styles.item}>
            <Text style={styles.item_text}>六年级</Text>
          </View>
        </View>
        <View
          style={{
            flex: 1,
            justifyContent: "space-between",
            width: "90%",
            flexDirection: "row"
          }}
        >
          <View style={styles.item}>
            <Text style={styles.item_text}>七年级</Text>
          </View>
          <View style={styles.item}>
            <Text style={styles.item_text}>八年级</Text>
          </View>
          <View style={styles.item}>
            <Text style={styles.item_text}>九年级</Text>
          </View>
        </View>
      </View>
    );
  }

  commit() {
    alert("确定");
  }

  setModalVisible(visible) {
    this.setState({
      modalVisible: visible
    });
  }
  clickGrade() {}
}
const styles = StyleSheet.create({
  item: {
    width: 127,
    height: 53,
    backgroundColor: "rgba(61, 192, 252, 0.15)",
    borderRadius: 30
  },
  item_text: {
    flex: 1,
    textAlign: "center",
    textAlignVertical: "center",
    color: "rgba(58, 58, 58, 1)",
    fontSize: 18
  }
});