'use strict'

import React, {Component} from 'react';
import {
    StyleSheet,
    Dimensions,
    Platform,
    View,
    Text,
    Image,
    
    TouchableOpacity,
} from 'react-native';
import ListView from 'deprecated-react-native-listview'

import {Map} from 'immutable';
import InfoCell from './InfoCell';


export default class PersonalInfo extends Component {
    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    renderRow(rowData,sectionID,rowID) {
        if (rowData.get('id') == 'separate') {
            return(
                <View style={{width: width,height: 18,backgroundColor: '#e5e5e5',}}/>
            );
        }
        return(
            <InfoCell
                dataSource={rowData}
                onPressInfoCell={this.props.onPressInfoCell}
            />
        );
    }

    render() {
        let {dataSource} = this.props;
        return (
            <View style={styles.container}>
                <ListView
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(dataSource.toArray())}
                    renderRow={this.renderRow}
                    renderFooter={()=>{
                        return(
                            <View style={styles.footer}>
                                <Image style={styles.bottomImage}
                                    source={require('../image/yoho_icon.png')}
                                />
                                <Text style={{color:'#b0b0b0',fontSize: 11}}>
                                    如果你还使用了我们的其他产品(Yoho!Now和mars)修改个人信息时将同步。
                                </Text>
                            </View>
                        )
                    }}
                />
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#efefef',
    },
    footer:{
        height: 112 * DEVICE_WIDTH_RATIO,
        backgroundColor: '#efefef',
        alignItems: 'center',
    },
    bottomImage: {
        width: 70,
        height: 40,
        marginTop: 12,
        marginBottom: 12,
    }
});