'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._onPressFilter = this._onPressFilter.bind(this);
        this._onPressLaunchProfile = this._onPressLaunchProfile.bind(this);
        this._onChangeVisibleRows = this._onChangeVisibleRows.bind(this);
        this._onMomentumScrollBegin = this._onMomentumScrollBegin.bind(this);
        this._onMomentumScrollEnd = this._onMomentumScrollEnd.bind(this);

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

        this.state = {
            selectedVisibleIndex: -1,
            scrollEnd: false,
        };
    }

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

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

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

    renderSectionHeader(sectionData, sectionID) {

        let {fliter} = this.props;

        switch(sectionID) {
            case 'brandReource': {
                return(<RedBrandStoreFilter resource={fliter} onPressStoreFilter={this._onPressFilter}/>);
            }
            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;}}>
                        {this.props.fliter == '1'?
                        <RedBrandStoreFilter resource={fliter} onPressStoreFilter={this._onPressFilter}/>
                        :null}
                        <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} onPressLink={this.props.onPressLink}/>);
        }  else if(sectionID == 'brandReource'){
            if (rowData.get('module_type') == 'coupon') {
                return(<CouponCell resource={rowData} onPressCoupon={this.props.onPressCoupon}/>);
            }else 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} onPressProduct={this.props.onPressProduct}/>);
            }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} videoCounts={videoCounts} onPressVideo={this.props.onPressVideo}/>);
            }else if (rowData.get('module_type') == 'TripleImage') {
                return(<TripleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
            }
        } else if (sectionID == 'productList') {
            let similarIndex = this.props.similarIndex;
            let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
            let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
            let showSimilarGuider = this.props.showSimilarGuider 
                && this.state.scrollEnd 
                && rowID == this.state.selectedVisibleIndex 
                && rowID != similarIndex;
            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}
                    showSimilarGuider={showSimilarGuider}
                />
            );
        }
        return null;
    }

    _onChangeVisibleRows(visibleRows, changedRows) {
        if (Object.keys(visibleRows).length == 0) {
            return;
        }

        let selectedIndex = -1;
        let sectionIDs = Object.keys(visibleRows);
        let targetSection = 'productList';
        if (!sectionIDs.includes(targetSection)) {
            return;
        }

        let rowIndexs = Object.keys(visibleRows[targetSection]);
        if (rowIndexs.length > 0) {
            selectedIndex = rowIndexs[0];
        } 
        if (rowIndexs.length > 3) {
            selectedIndex = rowIndexs[2];
        }

        this.setState({selectedVisibleIndex: selectedIndex});
    }

    _onMomentumScrollBegin(event) {
        this.setState({scrollEnd: false});
    }

    _onMomentumScrollEnd(event) {
        this.setState({scrollEnd: true});
    }

    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);
        videoCounts = shopsdecorator.counts;
        let resList = shopsdecorator.modules?shopsdecorator.modules.toArray():[];
        coupon?resList.unshift(coupon):null;

        let dataSource = null;
        if (fliter == 0) {
            dataSource = {
                ShopBanner: [shopIntro],
                brandReource: resList,
                productList: productList.list.toArray(),
            };
        } else if (fliter == 1) {
            dataSource = {
                ShopBanner: [shopIntro],
                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();
                        }
                    }}
                    onChangeVisibleRows={this._onChangeVisibleRows}
                    onMomentumScrollBegin={this._onMomentumScrollBegin}
                    onMomentumScrollEnd={this._onMomentumScrollEnd}
                />

                {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 videoCounts;
let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainer:{
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    listContainer: {
        width: width / 2,
    },
    brandFilterContainer: {
        marginLeft: -1,
        width: width + 2,
        height: 84,
    },
    placeholder: {
        width,
        height: 15,
    },
});