'use strict';

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

import Immutable,{Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import BrandProductFilter from '../cell/BrandProductFilter';
import BannerSwiper from '../cell/BannerSwiper';
import ActivityCell from '../../../outlet/components/outlet/ActivityCell';

export default class ProductListPool extends Component {
    constructor(props) {
        super(props);

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

    }

    renderSectionHeader(sectionData, sectionID) {
        switch(sectionID) {
            case 'productList': {
                let noFilterValue = true;
                this.props.filterFactors.map((value, key) => {
                    if (value) {
                        noFilterValue = false;
                    }
                });
                let productListIsEmpty = !this.props.productList || !this.props.productList.list || this.props.productList.list.size == 0;
                if (productListIsEmpty && noFilterValue) {
                    return null;
                }


                return (
                    <View style={styles.brandFilterContainer} onLayout={(evt) => {yPosition = evt.nativeEvent.layout.y;}}>
                        <BrandProductFilter
                            onPressFilter={this.props.onPressProductFilter}
                            selectOrder={this.props.productList.order}
                        />
                    </View>
                );
            }
        }
        return null;
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        switch(sectionID) {
            case 'bannerInfo':
                if (rowData.get('template_name') == 'focus') {
                    return(<BannerSwiper resource={rowData} row_ID={rowID} onPressProduct={this.props.onPressBanner}/>);
                }
                break;
            case 'activity':
                return(<ActivityCell resource={rowData} key = {rowID + 'activityList'} />);
                break;
            case 'productList':
            case 'newUserProductList':                
            {
                let promotionTitleDic = rowData.get('promotionTitleDic');
                if (promotionTitleDic) {
                    return (
                        <View style = {styles.textView}>
                            <Text style = {styles.text}>{promotionTitleDic}</Text>
                        </View>
                    );
                }else {
                    let similarIndex = this.props.similarIndex;
                    let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
                    let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
                    return (
                        <BrandProductListCell
                            style={[styles.listContainer, customStyle]}
                            key={'row' + rowID}
                            rowID={rowID}
                            data={rowData}
                            similarIndex={similarIndex}
                            onPressProduct={this.props.onPressProductCell}
                            onLongPressProduct={this.props.onLongPressProduct}
                            onPressFindSimilar={this.props.onPressFindSimilar}
                            onPressDislike={this.props.onPressDislike}/>
                    );
                }
            }
            default:
                return null;
        }
        return null;
    }

    render() {

        let {
            productList,
            bannerInfo,
            type,
            originParams,
            activityInfo,
        } = this.props;

        let promotionTitle = originParams?originParams.promotionTitle:''
        let promotionTitleDic = {'promotionTitleDic': promotionTitle};
        let isFetching = (productList.isFetching && productList.currentPage == 0) || bannerInfo.isFetching || activityInfo.isFetching;
        let dataSource;
        if (type == 'YH_ProductListPoolView') {
            dataSource = {
                productList: productList.list.toArray(),
            };
        }else if (type == 'YH_VipProListVC') {
            dataSource = {
                bannerInfo: bannerInfo.list.toArray(),
                productList: productList.list.toArray(),
            };
        }else if (type == 'YH_PromotionProductListVC') {
            let resList = productList.list?productList.list.toArray():[];
            promotionTitleDic?resList.unshift(Immutable.fromJS(promotionTitleDic)):null;
            dataSource = {
                productList: resList,
            };
        }else if (type == 'YH_OutLetProListVC') {
            dataSource = {
                activity: activityInfo.list.toArray(),
                productList: productList.list.toArray(),
            };
        }else if (type == 'YH_InstalmentView') {
            dataSource = {
                productList: productList.list.toArray(),
            };
        }else if (type == 'YH_NewUserView') {
            dataSource = {
                newUserProductList: productList.list.toArray(),
            };
        }

        let isLoadingMore = productList.isFetching && productList.currentPage > 0;
        let endReached = productList.endReached;

        return (
            <View style={styles.container}>
                <ListView
                    ref='ProductListPool'
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                    renderFooter={()=>{
                        if (endReached) {
                            return <View style={styles.placeholder} />;
                        } else {
                            return <LoadMoreIndicator isVisible={isLoadingMore} animating={true}/>;
                        }
                    }}
                    onEndReached={() => {
                        if (productList && productList.list && productList.list.size > 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                />

                <LoadingIndicator
                    isVisible={isFetching}
                />
            </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;
let yPosition = 0;

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainer:{
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    placeholder: {
        width,
        height: 15,
    },
    listContainer: {
        width: width / 2,
    },
    brandFilterContainer: {
        marginLeft: -1,
        width: width + 2,
        height: 40,
    },
    textView: {
        width: width,
        height: 40,
        backgroundColor: '#f0f0f0',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        textAlign: 'center',
		fontSize: 16,
		fontWeight: 'bold',
		color: '#444',
    }
});