'use strict';

import React, {Component} from 'react';
import {
    StyleSheet,
    Dimensions,
    Platform,
    View,
    Text,
    Image,
    ListView,
    TouchableOpacity,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import OutletSwiper from './OutletSwiper';
import OutletSingleImage from './OutletSingleImage';
import OutletDoubleImage from './OutletDoubleImage';
import OutletThreeImage from './OutletThreeImage';
import OutletRecommendFive from './OutletRecommendFive';
import ProductFliter from './ProductFliter';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import ActivityCell from './ActivityCell';

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

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

	componentDidMount() {
        this._onRefresh && this._onRefresh(false);
	}


    _onRefresh(ptr) {
        let {
            resource,
        } = this.props;

        if (resource.get('sort_name')=='即将开始' || resource.get('sort_name') == '即将结束') {
            this.props.getOutletActivityList && this.props.getOutletActivityList(resource.get('content_code'));
        }else {
            this.props.getOutletHomeResource && this.props.getOutletHomeResource(resource.get('content_code'),ptr);
            this.props.getOutletActivityList && this.props.getOutletActivityList(resource.get('content_code'));
        }
    }

    _onPressFilter(value){
        let {
            resource,
        } = this.props;

        let categoryNavigationList = resource.get('categoryNavigationList')?resource.get('categoryNavigationList').toArray():null;
        let categoryNavigationItem = categoryNavigationList?categoryNavigationList[value].toJS():null;

        this.props.onPressFilter && this.props.onPressFilter(resource.get('content_code'),value,categoryNavigationItem);
    }

    setActivityFliter() {
        let {
            resource,
        } = this.props;

        this.props.setActivityFliter && this.props.setActivityFliter(resource.get('content_code'),true);
    }

    renderSectionHeader(sectionData, sectionID) {
        if (sectionID == 'categoryNavigationList') {
            let {
                resource,
            } = this.props;

            if (!resource) {
                return null;
            }
            let categoryNavigationList = resource.get('categoryNavigationList');
            let Navfliter = resource.get('Navfliter')?resource.get('Navfliter'):0;

            return (
                <ProductFliter
                    resource={categoryNavigationList}
                    onPressFilter={this._onPressFilter}
                    navfliter={Navfliter}
                />
            );
        }
        return null;
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        // console.log(rowData.toJS());
        if (sectionID == 'outletHomeReource') {
            if (rowData.get('template_name') == 'NL2R') {
                return(<OutletThreeImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }else if (rowData.get('template_name') == 'focus') {
                return(<OutletSwiper resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }else if (rowData.get('template_name') == 'single_image') {
                return(<OutletSingleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }else if (rowData.get('template_name') == 'double_image') {
                return(<OutletDoubleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }else if (rowData.get('template_name') == 'recommend_content_five') {
                return(<OutletRecommendFive resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }else if (rowData.get('template_name') == 'app_hot_brands') {
                return(<OutletRecommendFive resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }else if (rowData.get('template_name') == '文字广告') {
                // return(<TripleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }
        }else if (sectionID == 'activityList') {
            return(<ActivityCell resource={rowData} onPressProduct={this.props.onPressProduct}/>);
        }else if (sectionID == 'activityMore') {
            if (rowData == 'more') {
                return(
                    <TouchableOpacity activeOpacity={1} style={{width: width,height: 50,backgroundColor: 'red'}} onPress={() => {this.setActivityFliter && this.setActivityFliter();}}>
                        <View style={{width: width,height: 50,backgroundColor: 'red'}}>
        					<Text>more</Text>
                        </View>
    				</TouchableOpacity>
                );
            }
        }else if (sectionID == 'categoryNavigationList') {

            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}
                    onPressProduct={this.props.onPressProductListProduct}/>
            );
        }
        return null;
    }

    render() {

        let {
            resource,
        } = this.props;

        if (!resource) {
            return null;
        }

        let isFetching = resource.get('isFetching')?resource.get('isFetching'):false;
        let honeResource = resource.get('honeResource');
        let activityList = resource.get('activityList')?resource.get('activityList').toArray():null;
        let activityMore = resource.get('activityMore');
        let categoryNavigationList = resource.get('categoryNavigationList')?resource.get('categoryNavigationList').toArray():null;
        let fliter = resource.get('Navfliter')?resource.get('Navfliter'):0;
        let productList = categoryNavigationList?categoryNavigationList[fliter].get('list'):null;
        let error = resource.get('error');
        let ptr = resource.get('ptr')==true ? true : false;
        let list = list = honeResource?honeResource.get('list'):null;
        let activityListNum = activityList?activityList.length:0;
        if (!activityMore) {
            activityList = activityList?activityList.slice(0,10):null;
        }

        let dataSource = {
            outletHomeReource: list?list.toArray():[],
            activityList: activityList?activityList:[],
            activityMore: (!activityMore && activityListNum>10)?['more']:[],
            categoryNavigationList: productList?productList.toArray():[],
        };

        return (
			<View style={styles.container}>
				<ListView
					ref='OutletPageListView'
					contentContainerStyle={styles.contentContainerStyle}
					enableEmptySections={true}
					dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
					renderRow={this.renderRow}
					renderSectionHeader={this.renderSectionHeader}
                    enablePullToRefresh={true}
                    isOnPullToRefresh={isFetching}
                    onRefreshData={() => {
                        this._onRefresh && this._onRefresh(true);
                    }}
                    onEndReached={() => {
                        if (categoryNavigationList && productList && productList.size > 0) {
                            let {
                                resource,
                            } = this.props;
                            this.props.onEndReached && this.props.onEndReached(resource.get('content_code'),categoryNavigationList?categoryNavigationList[fliter].toJS():null);
                        }
                    }}
				/>
			</View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;

let styles = StyleSheet.create({
    container: {
        flex: 1,
		backgroundColor: 'white',
    },
    contentContainerStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    listContainer: {
        width: width / 2,
    },
});