'use strict';
import React from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    PixelRatio,
    TouchableOpacity,
    Platform,
    ListView,
} from 'react-native';

import Immutable, {Map} from 'immutable';
import ProductListCell from '../../../common/components/ListCell/ProductListCell';

export default class InstallmentStatus extends React.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),
        });
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
        let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
            return (
                <ProductListCell
                    style={[styles.listContainer, customStyle]}
                    key={'row' + rowID}
                    rowID={rowID}
                    data={rowData}
                    onPressProduct={this.props.onPressProductListProduct}
                />
            );
    }

    _renderHeader() {
        let {failReason,status,jumpUrl,statusInfo,goods} = this.props.installmentStausPageInfo;
        let resultImg;
        if (status == 'review') {
            resultImg = require('../../image/review-img-1.png');
        } else if (status == 'error') {
            resultImg = require('../../image/review-img-2.png');
        } else if (status == 'success') {
            resultImg = require('../../image/review-img-4.png');
        } else if (status == 'cancel') {
            resultImg = require('../../image/review-img-5.png');
        } else if (status == 'refresh') {
            resultImg = require('../../image/review-img-6.png');
        }
        if (goods && goods.size > 0) {
            headerContainerHeight = (235 + 27 + 20 + 79 + 84.5) * DEVICE_WIDTH_RATIO;
        }
        if (status == 'cancel') {
            headerContainerHeight = (235 + 27 + 20 + 79 + 40) * DEVICE_WIDTH_RATIO;
        }
        return (
            <View style={[styles.headerContainer,{height:headerContainerHeight}]}>
                <Image
                    style={styles.statusIcon}
                    source={resultImg}
                    resizeMode={'contain'}
                />
                <Text style={styles.message}>
                    {statusInfo.get('message')}
                </Text>
                {status=='success'?
                    <View>
                    <Text style={{fontSize:12}}>
                        ¥
                        <Text style={{fontSize: 24}}>
                            {statusInfo.get('reason')}
                        </Text>
                    </Text>
                    </View>
                    :<View>
                        <Text style={styles.reason}>
                            {statusInfo.get('reason')}
                        </Text>
                        {statusInfo.get('reasonTwo') ?
                            <Text style={styles.reason}>
                                {statusInfo.get('reasonTwo')}
                            </Text>
                            :null
                        }
                        {statusInfo.get('reasonThird') ?
                            <Text style={styles.reason}>
                                {statusInfo.get('reasonThird')}
                            </Text>
                            :null
                        }
                    </View>
                }

                <TouchableOpacity onPress={() => {this.props.onPressStatusPageBtn && this.props.onPressStatusPageBtn()}} >
                    <View style={styles.buttonContainer}>
                        <Text style={styles.button}>
                            {statusInfo.get('btnText')}
                        </Text>
                    </View>
    			</TouchableOpacity>

                {goods&&goods.size>0 ?
                    <View>
                        <View style={{
                            marginTop: 30 * DEVICE_WIDTH_RATIO,
                            width: width,
                            height: 10 * DEVICE_WIDTH_RATIO,
                            backgroundColor: '#e5e5e5',
                        }}/>
                        <Text style={{
                            width: width,
                            height: 44 * DEVICE_WIDTH_RATIO,
                            textAlign: 'center',
                            lineHeight: 29 *DEVICE_WIDTH_RATIO,
                        }}>
                            分期专享
                        </Text>
                        <View style={{
                            width: width,
                            height: 0.5 * DEVICE_WIDTH_RATIO,
                            backgroundColor: '#e5e5e5',
                        }}/>
                    </View>
                    :null
                }
            </View>
        )
    }

    render() {
        let {failReason,status,jumpUrl,statusInfo,goods} = this.props.installmentStausPageInfo;
        let dataSource = goods.toArray();
        return(
            <View style={styles.container}>
               <ListView
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(dataSource)}
                    renderRow={this._renderRow}
                    renderHeader={this._renderHeader}
                    onEndReached={() => {
                        if (goods && goods.size > 0) {
                                this.props.onEndReached && this.props.onEndReached();
                            }
                        }}
               />
            </View>
        );
    }
};

let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowHeight = Math.ceil(254 * width / 320);
let rowMarginTop = Math.ceil(10 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
const DEVICE_WIDTH_RATIO = width / 320;
let headerContainerHeight = (235 + 27 + 20 + 79) * DEVICE_WIDTH_RATIO;


let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    headerContainer: {
        width: width,
        alignItems: 'center',
        height: headerContainerHeight,
    },
    contentContainer:{
		flexDirection: 'row',
		flexWrap: 'wrap',
    },
    listContainer: {
        width: width / 2,
    },
    statusIcon: {
        width: 110 * DEVICE_WIDTH_RATIO,
        height: 110 * DEVICE_WIDTH_RATIO,
        marginTop: 100 * DEVICE_WIDTH_RATIO,
        marginBottom: 25 * DEVICE_WIDTH_RATIO,
    },
    message: {
        fontSize: 12 * DEVICE_WIDTH_RATIO,
        color: '#444444',
        marginBottom: 15 * DEVICE_WIDTH_RATIO,
    },
    reason: {
        width: 260 * DEVICE_WIDTH_RATIO,
        fontSize: 12 * DEVICE_WIDTH_RATIO,
        color: '#b0b0b0',
        textAlign: 'center',
        lineHeight: 20 * DEVICE_WIDTH_RATIO,
    },
    buttonContainer: {
        marginTop: 35 * DEVICE_WIDTH_RATIO,
        width: 235 * DEVICE_WIDTH_RATIO,
        height: 44 * DEVICE_WIDTH_RATIO,
        backgroundColor: '#222222',
        borderRadius: 5 * DEVICE_WIDTH_RATIO,
    },
    button: {
        color: 'white',
        textAlign: 'center',
        fontSize: 14 * DEVICE_WIDTH_RATIO,
        backgroundColor: 'transparent',
        lineHeight: 29 * DEVICE_WIDTH_RATIO,
    },
});