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

import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	StatusBar,
	ImageBackground,
	Button,
	DeviceEventEmitter
} from 'react-native';
import BasePage from './BasePage';
import commonutil from './utils/commonutil';
import http_user from './services/user';

type Props = {};
export default class SchoolAge extends BasePage {
	state = {
		file_user_data: new Map()
	};
	render() {
		return (
			<ImageBackground
				// source={{
				// 	uri:
				// 		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg'
				// }}
				style={{
					flex: 1,
					width: '100%',
					height: '100%',
					backgroundColor: 'white'
				}}
			>
				<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'dark-content'} />
				<View style={{ flex: 0.5 }} />
				<Text style={styles.title_text}>请选择孩子所在的学龄段</Text>
				<View style={{ flex: 0.1 }} />
				<View
					style={{
						flex: 5,
						flexDirection: 'column',
						justifyContent: 'center',
						alignItems: 'center'
					}}
				>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.pres.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/preschool.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.primary.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/primary.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.middle.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/middle.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
				</View>
			</ImageBackground>
		);
	}

	componentWillMount() {
		this.getUserInfo();
	}
	pres() {
		//PRESCHOOL("学前")
		this.updateUserInfo('PRESCHOOL');
	}

	primary() {
		// PRIMARY_SCHOOL("小学")
		this.updateUserInfo('PRIMARY_SCHOOL');
	}

	middle() {
		this.updateUserInfo('MIDDLE_SCHOOL');
	}
	async getUserInfo() {
		await global.storage
			.load({
				key: 'userInfo'
			})
			.then((result) => {
				this.state.file_user_data = commonutil.jsonToMap(result);
			})
			.catch((err) => {
				console.log('ERROR' + err.message);
			});
	}
	async updateUserInfo(group) {
		if (this.state.file_user_data.get('isVisitor')) {
			this.state.file_user_data.set('ageGroup', group);
			this.state.file_user_data.set('channel', this.state.file_user_data.get('channel'));
			this.state.file_user_data.set('gmtCreated', this.state.file_user_data.get('gmtCreated'));
			this.state.file_user_data.set('gmtModified', this.state.file_user_data.get('gmtModified'));
			this.state.file_user_data.set('birthday', '');
			this.state.file_user_data.set('city', '');
			this.state.file_user_data.set('country', '');
			this.state.file_user_data.set('eid', '');
			this.state.file_user_data.set('grade', '');
			this.state.file_user_data.set('mobile', '');
			this.state.file_user_data.set('nickName', '');
			this.state.file_user_data.set('province', '');
			this.state.file_user_data.set('school', '');
			this.state.file_user_data.set('sex', '');
			this.state.file_user_data.set('status', '');
			this.state.file_user_data.set('uid', '');
			this.saveUserInfo(commonutil.mapToJson(this.state.file_user_data));
			this.clearPageToNext('MainPage');
			return true;
		}
		let opts = {
			method: 'PUT', //请求方法
			body: { ageGroup: group } //请求体
		};
		await http_user.update_UserInfo(opts).then((res) => {
			this.state.file_user_data.set('ageGroup', res.data.ageGroup);
			this.state.file_user_data.set('avatar', res.data.avatar);
			this.state.file_user_data.set('birthday', res.data.birthday);
			this.state.file_user_data.set('channel', res.data.channel);
			this.state.file_user_data.set('city', res.data.city);
			this.state.file_user_data.set('country', res.data.country);
			this.state.file_user_data.set('eid', res.data.eid);
			this.state.file_user_data.set('gmtCreated', res.data.gmtCreated);
			this.state.file_user_data.set('gmtModified', res.data.gmtModified);
			this.state.file_user_data.set('mobile', res.data.mobile);
			this.state.file_user_data.set('nickName', res.data.nickName);
			this.state.file_user_data.set('province', res.data.province);
			this.state.file_user_data.set('school', res.data.school);
			this.state.file_user_data.set('sex', res.data.sex);
			this.state.file_user_data.set('status', res.data.status);
			this.state.file_user_data.set('uid', res.data.uid);
			this.saveUserInfo(commonutil.mapToJson(this.state.file_user_data));
			this.clearPageToNext('MainPage');
		});
	}
}

const styles = StyleSheet.create({
	title_text: {
		justifyContent: 'center',
		alignItems: 'center',
		color: 'black',
		fontSize: 20,
		fontWeight: '300',
		textAlign: 'center'
	},
	view_flex: { flex: 0.1 },
	touchable_item: {
		flex: 1,
		width: '90%',
		justifyContent: 'center',
		alignItems: 'center'
	},
	image_item: {
		width: '100%',
		height: '95%',
		resizeMode: 'contain'
	}
});