'use strict'

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

import {Map} from 'immutable';
import Header from './Header';
import RedBrandStoreFilter from './RedBrandStoreFilter';
import Title from './Title';
import Video from './Video';
import SingleImage from './SingleImage';
import DoubleImage from './DoubleImage';
import TripleImage from './TripleImage';
import RedBrandSwiper from './RedBrandSwiper';
import BrandProductMoreFilter from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/BrandProductMoreFilter';
import ProductCategoryList from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/ProductCategoryList';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import BrandProductFilter from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/BrandProductFilter';
import CouponCell from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/CouponCell';
import Prompt from '../../../coupon/components/coupon/Prompt';

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

        this.renderSectionHeader = this.renderSectionHeader.bind(this);
        this.renderRow = this.renderRow.bind(this);
        this._onPressProductFilter = this._onPressProductFilter.bind(this);
        this._onPressLaunchProfile = this._onPressLaunchProfile.bind(this);

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

    _onPressLaunchProfile(value){
        this.refs.redBrandList && this.refs.redBrandList.scrollTo({x: 0, y: 0, animated: false});
        this.props.onPressLaunchProfile && this.props.onPressLaunchProfile(value);
    }

    _onPressProductFilter(value){

        if(value === 'filter'){
            this.refs.redBrandList && this.refs.redBrandList.scrollTo({x: 0, y: yPosition, animated: false});
        }
        if(value==='default'){
            this.refs.redBrandList && this.refs.redBrandList.scrollTo({x: 0, y: yPosition, animated: false});

        }
        this.props.onPressProductFilter && this.props.onPressProductFilter(value);

    }

    renderSectionHeader(sectionData, sectionID) {
        switch(sectionID) {
            case 'brandReource': {
                return(<RedBrandStoreFilter resource={'launchProfile'} onPressStoreFilter={this.props.onPressStoreFilter}/>);
            }
            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._onPressProductFilter}
                            lastSelected={this.props.productList.isFilter}
                            moreFilter={this.props.productList.isMoreFilter}
                            selectOrder={this.props.productList.order}
                        />
                    </View>
                );
            }
            default:
                return null;
        }
        return null;
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        if (sectionID == 'ShopBanner') {
            let {launchProfile} = this.props;
            return(<Header resource={rowData} launchProfile={launchProfile} onPressLaunchProfile={this._onPressLaunchProfile} onPressCollection={this.props.onPressCollection}/>);
        } else if (sectionID == 'coupon') {
            return(<CouponCell resource={rowData} onPressCoupon={this.props.onPressCoupon}/>);
        } else if(sectionID == 'brandReource'){
            if (rowData.get('module_type') == 'CarouselImage') {
                return(<RedBrandSwiper resource={rowData} onPressSlideItem={this.props.onPressProduct}/>);
            }else if (rowData.get('module_type') == 'Title') {
                return(<Title resource={rowData} onPressMore={this.props.onPressMore}/>);
            }else if (rowData.get('module_type') == 'SingleImage') {
                return(<SingleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }else if (rowData.get('module_type') == 'DoubleImage') {
                return(<DoubleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }else if (rowData.get('module_type') == 'Video') {
                return(<Video resource={rowData} onPressVideo={this.props.onPressVideo}/>);
            }else if (rowData.get('module_type') == 'TripleImage') {
                return(<TripleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }
        } else if (sectionID == 'productList') {
            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.onPressProduct}/>
            );
        }
        return null;
    }

    render() {

        let {
            productList,
            launchProfile,
            fliter,
            categoryFilterList,
            filterCategoryDetailFilterList,
            filterNameFactors,
            filterFactors,
            shopIntro,
            shopsdecorator,
            receiveCouponResult,
            coupon,
        } = this.props;

        let isFetching = (productList.list.size > 0 && productList.isFetching && productList.currentPage == 0);

        let dataSource = null;
        if (fliter == 0) {
            dataSource = {
                ShopBanner: [shopIntro],
                coupon: [coupon],
                brandReource: shopsdecorator.modules.toArray(),
            };
        } else if (fliter == 1) {
            dataSource = {
                ShopBanner: [shopIntro],
                brandReource: [],
                productList: productList.list.toArray(),
            };
        }

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

        let needShowToast = this.props.receiveCouponResult.isNeedShow;
        let showToastMessage = this.props.receiveCouponResult.showMessage;

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

                {productList.isFilter ?
                    <ProductCategoryList
                        productList={productList}
                        onPressFilter={this._onPressProductFilter}
                        lastSelected={this.props.productList.isFilter}
                        moreFilter={this.props.productList.isMoreFilter}
                        selectOrder={this.props.productList.order}
                        categoryFilterList={categoryFilterList}
                        filterCategoryDetailFilterList={filterCategoryDetailFilterList}
                        onPressProductFilterLeftItem={this.props.onPressProductFilterLeftItem}
                        filterNameFactors={filterNameFactors}
                        onPressProductFilterRightItem={this.props.onPressProductFilterRightItem}
                        onPressCloseMoreFilter={this.props.onPressCloseMoreFilter}
                        onPressMoreFilter={this.props.onPressMoreFilter}/> : null}

                {productList.isMoreFilter ?
                    <BrandProductMoreFilter
                        productList={productList}
                        onPressCloseMoreFilter={this.props.onPressCloseMoreFilter}
                        onPressMoreFilter={this.props.onPressMoreFilter}/> : null}


                {needShowToast ? <Prompt
                    text={showToastMessage}
                    duration={1000}
                    onPromptHidden={this.props.resetReceiveCouponResult}
                /> : null}

                <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',
    },
    listContainer: {
        width: width / 2,
    },
    brandFilterContainer: {
        marginLeft: -1,
        width: width + 2,
        height: 40,
        borderTopColor: '#e5e5e5',
        borderBottomColor: '#e5e5e5',
        borderWidth: 0.5,
    },
    placeholder: {
        width,
        height: 15,
    },
});