'use strict';

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

import HeadTitleCell from '../cell/HeadTitleCell';
import ProductListCell from '../../../common/components/ListCell/ProductListCell';


import LoadingIndicator from '../../../common/components/LoadingIndicator';

export default class FastExpress extends Component {

    constructor(props) {
        super(props);
        this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
        this.renderHeader = this.renderHeader.bind(this);
        this.renderRow = this.renderRow.bind(this);
    }


    renderHeader(){

        let {data, fastExpressList} = this.props;
        let showProductTitle = (!data || data.toArray().length == 0) ? false : true;

        let desc1 = "白金会员可享受快速送达服务。订单将采用最快速度进行配送（比如航空快件），保证您可以尽快获得心仪的商品。";
        let desc2 = "※ 如果您的收件区域位于可提供快速送达服务的快递范围外或订单内的商品包含航空禁运品，我们仍将统一采用可送达快递进行配送，敬请谅解。";
 
        return(

            <View style={styles.headerContainer}>
                <View style={styles.fastHeader}>
                    <Text style={styles.fastHeaderCell}>{"等级"}</Text>
                    <Text style={styles.fastHeaderCell}>{"快速送达服务"}</Text>
                </View>
                {
                    fastExpressList.map((item, i) => {
                    let levelName = item.get('vip_name');
                    let isFastImage = item.get('is_fast_express');
                    return (
                        <View key={"fastExpress"+i} style={styles.fastContent} >
                            <Text style={styles.fastContentText}>{levelName}</Text>
                            <View style={styles.fastContentImageContainer}>
                            {
                                (isFastImage == 1) ? <Image source={require('../../images/yes.png')} style={styles.fastContentImage} />
                                : <Image source={require('../../images/no.png')} style={styles.fastContentImage} />
                            }
                            </View>
                        </View>
                    );
                })}

                <Text style={styles.headerDescription1}>{desc1}</Text>
                <Text style={styles.headerDescription2}>{desc2}</Text>

                { showProductTitle ? <HeadTitleCell title={"新品推荐"} /> : null}
            </View>

        );
    }


    renderRow(rowData, sectionID, rowID) {
        let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal*1.5 : rowMarginHorizontal*2;
        let customStyle = {paddingLeft};
        return (
            <View style={[styles.product,]}>
                <ProductListCell
                    style={[styles.listContainer, customStyle]}
                    key={'sectionID+rowID' + sectionID+rowID}
                    rowID={rowID}
                    data={rowData}
                    onPressProduct={this.props.onPressProductListProduct}
                />
            </View>
        );
    }

    render() {

        let {isFetching, data} = this.props;

        return (
            <View style={styles.container}>
                <ListView 
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(data.toArray())}
                    renderRow={this.renderRow}
                    renderHeader={this.renderHeader}
                    onEndReached={this.props.onEndReached}
                    initialListSize={30}
                    pageSize={30}
                />

                <LoadingIndicator isVisible={isFetching} />
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = Math.ceil((width - rowWidth * 2)/7);
let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
let rowMarginTop = Math.ceil(10 * DEVICE_WIDTH_RATIO);
let rowMarginBottom = Math.ceil(4 * DEVICE_WIDTH_RATIO);
let productHeight = Platform.OS === 'ios'? (rowHeight + rowMarginTop + rowMarginBottom) : (rowHeight + 4 + rowMarginTop + rowMarginBottom);



let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },

    contentContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },

    headerContainer: {
        width: width,
        height: 300,
        marginTop: 20,
    },

    fastHeader: {
        flexDirection: 'row',
        width: width - 50,
        height: 40,
        marginLeft: 25,
        marginRight: 25,
        backgroundColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
    },

    fastHeaderCell: {
        flex: 1,
        textAlign: 'center',
        fontSize: 15,
        color: '#393939',
    },

    fastContent: {
        flexDirection: 'row',
        width: width - 50,
        height: 40,
        marginLeft: 25,
        marginRight: 25,
        alignItems: 'center',
        justifyContent: 'center',
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderBottomWidth: 1,
        borderColor: '#f0f0f0',
    },

    fastContentText:{
        flex: 1,
        textAlign: 'center',
        fontSize: 15,
        color: '#393939',
    },

    fastContentImageContainer:{
        flex: 1,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        borderLeftWidth: 1,
        borderColor: '#f0f0f0',
    },

    fastContentImage:{
        width: 15,
        height: 15,
    },

    headerDescription1:{
        width: width - 50,
        marginLeft: 25,
        marginRight: 25,
        marginTop: 15,
        textAlign: 'center',
        fontSize: 11,
        color: '#C0C0C0',
    },

    headerDescription2:{
        width: width - 50,
        marginLeft: 25,
        marginRight: 25,
        marginTop: 5,
        marginBottom: 15,
        textAlign: 'center',
        fontSize: 11,
        color: '#C0C0C0',
    },

    listContainer: {
        width: width/2,
    },

    product: {
        width: width/2,
        backgroundColor: 'white',
        height: productHeight,
    },

});