'use strict'

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

import {Map} from 'immutable';
import VIPPrivilegeCell from './VIPPrivilegeCell';
import VIPLevelHeader from './VIPLevelHeader';

export default class VIPLevel extends Component {
    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.renderFooter = this.renderFooter.bind(this);
        this.renderHeader = this.renderHeader.bind(this);
        this.renderSectionHeader = this.renderSectionHeader.bind(this);
        this.renderSeparator = this.renderSeparator.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    renderFooter() {
        let {vipInfo} = this.props;
        return(
            <View style={styles.footer}>
                {vipInfo.get('enjoy_preferential') && vipInfo.get('enjoy_preferential').size ?
                <View style={{width: width,height: 15,backgroundColor: '#e5e5e5',}}/>
                :null
                }
                <TouchableOpacity activeOpacity={1.0} onPress={() => {
                    this.props.onPressAllVIPPrivilegeCell && this.props.onPressAllVIPPrivilegeCell();
                }}>
                <View style={styles.allPrivilegeCell}>
                    <Text style={{marginLeft: 15, fontSize: 15}}>
                        查看全部VIP特权
                    </Text>
                    <Image style={{marginRight: 15}}
                        source={require('../image/cell_indicator.png')}
                    />
                </View>
                </TouchableOpacity>
            </View>
        );
    }

    renderHeader() {
        let {nickname, vipInfo, vipShowPageInfo} = this.props;
        return(
            <VIPLevelHeader
                nickname={nickname}
                vipInfo={vipInfo}
                vipShowPageInfo={vipShowPageInfo}
            />
        );
    }

    renderSectionHeader(sectionData, sectionID) {
        if (!sectionData.length) {
            return null;
        }
        return(
            <View key={'sectionHeader' + sectionID} style={styles.sectionHeader}>
                <Text style={{lineHeight:38,fontSize:17,color:'#444444',height:58}}>
                    当前可享受的特权
                </Text>
                <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
            </View>
        );
    }

    renderRow(rowData,sectionID,rowID) {
        return(
            <VIPPrivilegeCell
                key={'row' + rowID}
                dataSource={rowData}
                onPressPrivilegeCell={this.props.onPressPrivilegeCell}
                rowID={rowID}
            />
        );
    }

    renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return(
            <View key={'separator' + rowID} style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
        );
    }

    render() {
        let {nickname, isFetching, vipInfo} = this.props;
        let dataSource = {};
        if (vipInfo.get('enjoy_preferential') && vipInfo.get('enjoy_preferential').size) {
            dataSource = {'privilegeSection':vipInfo.get('enjoy_preferential').toArray()};
        }
        return (
            <View style={styles.container}>
                <ListView
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this.renderRow}
                    renderFooter={this.renderFooter}
                    renderHeader={this.renderHeader}
                    renderSectionHeader={this.renderSectionHeader}
                    renderSeparator={this.renderSeparator}
                    showsVerticalScrollIndicator={false}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ebebeb',
    },
    allPrivilegeCell: {
        height: 44 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    sectionHeader: {
        height: 59,
        paddingLeft: 15,
        backgroundColor:'white',
    },
});