'use strict';

import React, {Component} from 'react';
import {DeviceEventEmitter, Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {Immutable} from "immutable";
import SingleImage from './floor/SingleImage';
import MineCell from './cell/MineCell';
import YH_Image from '../../common/components/YH_Image';


export default class Mine extends Component {
    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.bind(this);
        this._renderHeader = this._renderHeader.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('BankCardBindSuccessEvent', () => {
            this.props.refreshSettlementInfo && this.props.refreshSettlementInfo();
        });
    }

    componentWillUnmount() {
        this.subscription.remove();
    }

    _renderHeader() {
        let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
        let bindStyle = bindStatus ? {color: '#444444'} : {color: '#D0021B'};
        let isBind = bindStatus ? '已绑定' : '未绑定';
        let bindType = bindStatus ? '2' : '1'; // 2绑定，1未绑定
        let ico = this.props.profile.head_ico;
        let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);
        let nickname = this.props.profile.nickname;
        return (
            <View>
                <View style={styles.headerBackground}>
                    <YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
                    <View style={styles.textView}>
                        <Text style={styles.nicknameText}>{nickname}</Text>
                    </View>
                </View>
                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
                <TouchableOpacity activeOpacity={1} style={styles.withdrawView} onPress={() => {
                    this.props.jumpWithUrl && this.props.jumpWithUrl('我的银行卡', 'bankCard', bindType);
                }}>
                    <Text style={styles.hasWithDrawText}>我的银行卡</Text>
                    <View style={[styles.textView, {flexDirection: 'row', paddingRight: 15}]}>
                        <Text style={[styles.hasWithDrawText, bindStyle]}>{isBind}</Text>
                        <Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
            </View>
        );
    }

    _renderRow(rowData, sectionID, rowID) {
        if(!rowData || !rowData.get('data')){
            return null;
        }
        let templatename = rowData.get('template_name');

        if (templatename === 'textNav' && rowData) {
            return (
                <MineCell
                    resource={rowData.get('data')}
                    resourceJumpWithUrl={this.props.resourceJumpWithUrl}
                    styles={styles}
                />
            );
        } else if (templatename === 'newSingleImage' && rowData) {
            console.log(rowData.toJS());
            return (
                            <SingleImage
                            data={rowData}
                       resourceJumpWithUrl={this.props.resourceJumpWithUrl}
                   />)
        } else {
            return null
        }

    }

    render() {
        let {mineResourceInfo} = this.props;
        let resourceList = mineResourceInfo.resourceList ? mineResourceInfo.resourceList.toArray() : [];
        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(resourceList)}
                    renderHeader={this._renderHeader}
                    renderRow={this._renderRow}
                />
            </View>
        );
    }

}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#f0f0f0'
        },
        headerBackground: {
            width: width,
            height: 80,
            backgroundColor: '#FFFFFF',
            padding: 15,
            flexDirection: 'row',

        },
        headIcon: {
            width: 50,
            height: 50,
            marginRight:10,
            overflow: 'hidden',
            borderRadius: 25,
        },
        textView: {
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
        },
        nicknameText: {
            fontSize: 14,
            color: '#444444',
            fontWeight: 'bold'
        },
        withdrawView: {
            width: width,
            height: 50,
            backgroundColor: '#FFFFFF',
            flexDirection: 'row',
            paddingLeft: 15,
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        hasWithDrawText: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            color: '#444444',
        },
        arrowImage: {
            width: 16,
            height: 16,
            marginLeft: 2,
        },
        contentContainer: {
            flexDirection: 'row',
            flexWrap: 'wrap',
            backgroundColor: 'white'
        }
    })
;