'use strict';

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

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


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

export default class Birth 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} = this.props;
        let showProductTitle = (!data || data.toArray().length == 0) ? false : true;
        
        return(
            <View style={styles.birthdayTipContainer}>
                <Text style={styles.tipText}>生日特惠:除了在生日当月月初收到来自我们的真诚祝福，还将收到每年一次的”特殊优惠券”作为生日礼物。</Text>
                <Text style={styles.tipText}>※需要在成为我们的会员时完善您的生日及相关信息,否则将无法得到优惠</Text>
                <TouchableOpacity activeOpacity={1} onPress={() => {
                        this.props.onPressComplete && this.props.onPressComplete();}}>
                    <Text style={styles.completeButton}>完善生日信息</Text>
                </TouchableOpacity>

                { 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} />

                <AdvertisementView />
            </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',
    },

    listContainer: {
        width: width/2,
    },

    product: {
        width: width/2,
        backgroundColor: 'white',
        height: productHeight,
    },
    birthdayTipContainer:{
        width:width,
        height:220,
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'white',
    },

    tipText:{
        fontSize: 12,
        marginLeft:14,
        marginRight:14,
        color: '#c0c0c0',
        textAlign: 'center',
        fontWeight: 'bold',
        lineHeight:18,
    },
    completeButton:{
        fontSize:16,
        paddingLeft:18,
        paddingRight:18,
        paddingTop:8,
        paddingBottom:8,
        marginTop:30,
        marginBottom: 15,
        color: '#777777',
        textAlign: 'center',
        borderColor:'#444444',
        borderWidth:2,
        borderRadius: 6,
    },
});