'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import DetailBrand from './DetailBrand';
import OtherArticle from './OtherArticle';
import Tags from './Tags';
import SingleImage from './SingleImage';
import DetailText from './DetailText';
import GoodsCell from './GoodsCell';
import Header from './Header';
import MoreLink from './MoreLink';
import GoodsGroupHeader from './GoodsGroupHeader';
import GoodsGroupList from './GoodsGroupList';
import SmallPic from './SmallPic';
import Weixin from './Weixin';
import LoadingIndicator from '../../../common/components/LoadingIndicator';

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



export default class Detail extends Component {

    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.renderHeader = this.renderHeader.bind(this);
        this.scrollTo = this.scrollTo.bind(this);
        this.listView = null;
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    shouldComponentUpdate(nextProps){

        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }

    onLayout(rowID, e) {
        let {y} = e.nativeEvent.layout;
        this.props.onPressGoodY(y);
    }

    scrollTo(){
        let {goods_group_y} = this.props.resource;
        this.listView.scrollTo({x: 0, y: goods_group_y, animated: false});
    }

    renderHeader() {
        let {resource} = this.props;
        let {author,article} = resource;
        return(
            <Header resource={{author,article}} onPressAuthor={this.props.onPressAuthor} />
        );
    }

    renderRow(rowData,sectionID,rowID,highlightRow) {

        if (sectionID == 'detailList') {
            let template_name = rowData.get('template_name');
            if (template_name == 'text') {
                return (
                    <DetailText resource={rowData} onPressLink={this.props.onPressLink}/>
                );
            }else if (template_name == 'single_image') {
                return (
                    <SingleImage resource={rowData}/>
                );
            }else if (template_name == 'small_pic') {
                return (
                    <SmallPic resource={rowData}/>
                );
            }else if (template_name == 'goods_group') {
                let {resource} = this.props;
                let {goods_group_Filter} = resource;
                let data = rowData.get('productList')?rowData.get('productList').toArray():null;
                let list = data?data[goods_group_Filter]:null;

                return (
                    <View style={styles.GoodsGroupHeader} onLayout={this.onLayout.bind(this, rowID)}>
                        <GoodsGroupHeader resource={rowData} goods_group_Filter={goods_group_Filter} onPressFilter= {this.props.onPressFilter} scrollTo={this.scrollTo}/>
                        <GoodsGroupList resource={list} onPressProduct={this.props.onPressProduct}/>
                    </View>
                );
            }else if (template_name == 'goods') {
                return (
                    <GoodsCell resource={rowData} onPressProduct={this.props.onPressProduct}/>
                );
            }else if (template_name == 'link') {
                return (
                    <MoreLink resource={rowData} onPressMoreLink={this.props.onPressMoreLink}/>
                );
            }
        }else if (sectionID == 'weixin') {
            return (
                <Weixin resource={rowData} onPressWeixin={this.props.onPressWeixin}/>
            );
        }else if (sectionID == 'detailBrand') {
            return (
                <DetailBrand resource={rowData} onPressBrand={this.props.onPressBrand}/>
            );
        }else if (sectionID == 'detailOtherArticle') {
            return (
                <OtherArticle resource={rowData} onPressArticle={this.props.onPressArticle}/>
            );
        } else if (sectionID == 'tags'){
            return (
                <Tags resource={rowData} onPressTag={this.props.onPressTag}/>
            );
        }
        return null;
    }

    render() {

        let {resource} = this.props;
        let {
            articleId,
        	article,
            author,
            content,
            brand,
            otherArticle,
            weixin,
            goods_group_Filter,
        } = resource;
        let list = content?content.get('data'):[];
        let dataSource = {
            detailList: list.size?list.toArray():[],
            weixin: [weixin],
            detailBrand: [brand],
            tags:[article],
            detailOtherArticle: [otherArticle],
        };

        let isFetching = content.isFetching || article.isFetching || author.isFetching;

        return (
            <View style={styles.container}>
                {!isFetching?<ListView
                    ref={(ref)=>this.listView=ref}
                    initialListSize={1}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    showsVerticalScrollIndicator={false}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this.renderRow}
                    renderHeader={this.renderHeader}
                />:<LoadingIndicator
                    isVisible={isFetching}
                />}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        height: height - 64,
    },
    contentContainer:{
        backgroundColor: 'white',
    },
    GoodsGroupHeader: {
        flex: 1,
    },
});