'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 YearActivity 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(){
        return(
            <HeadTitleCell title={"你可能喜欢"} />
        );
    }


    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}
                    similarIndex={this.props.similarIndex}
                    onPressProduct={this.props.onPressProductListProduct}
                    onLongPressProduct={this.props.onLongPressProduct}
                    onPressFindSimilar={this.props.onPressFindSimilar}
                />
            </View>
        );
    }

    render() {

        let {isFetching, data} = this.props;

        if(!data || data.toArray().length == 0){
            return null;
        }

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

    listContainer: {
        width: width/2,
    },

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

});