'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 WeChatPublic from './WeChatPublic';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import RecommentProducts from './RecommentProducts';
import Comments from './Comments';
import CommentsTitle from './CommentsTitle';

import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
    Platform,
    TextInput,
    Animated,
    Keyboard,
} 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._onComment = this._onComment.bind(this);
        this._onSubmitEditing = this._onSubmitEditing.bind(this);
        this.listView = null;
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
        this.state = {
            viewMarginTop :  new Animated.Value(0),
            replyTo: 0,
        };
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow.bind(this));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide.bind(this));
    }

    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});
    }

    _keyboardWillShow(e){
        Animated.timing(
    　　　　this.state.viewMarginTop,
    　　　　{
    　　　　　　toValue: -e.startCoordinates.height,
    　　　　　　duration: 250,
    　　　　}
    　　).start();
    }
    _keyboardWillHide(e){
        Animated.timing(
    　　　　this.state.viewMarginTop,
    　　　　{
    　　　　　　toValue: 0,
    　　　　　　duration: 250,
    　　　　}
    　　).start();
    }

    _onSubmitEditing(event){
        let content = event.nativeEvent.text;
        let replyTos = this.state.replyTo;

        if (this.state.replyTo == 0) {
            replyTos = '';
        }
        this.props.onSubmitForComment && this.props.onSubmitForComment(content,replyTos);
        this.refs.textInput.clear();
        this.setState({replyTo: 0});
    }

    _onComment(id){
        this.setState({replyTo: id});
        this.refs.textInput && this.refs.textInput.focus();
    }

    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} onPressLink={this.props.onPressLink} onPressShopCar={this.props.onPressShopCar} onPressProduct={this.props.onPressTagProduct}/>
                );
            }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} onPressShopCar={this.props.onPressShopCar}/>
                );
            }else if (template_name == 'link') {
                return (
                    <MoreLink resource={rowData} onPressMoreLink={this.props.onPressMoreLink}/>
                );
            }else if (template_name == 'recommend_products') {
                return (
                    <RecommentProducts resource={rowData} onPressProduct={this.props.onPressProduct}/>
                );
            }
        }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}/>
            );
        } else if (sectionID == 'weChatPublic'){
            return (
                <WeChatPublic resource={rowData} onPressWeixin={this.props.onPressWeixin}/>
            );
        } else if (sectionID == 'commentsTitle'){
            let {resource} = this.props;
            let {commentsList} = resource;
            let total = commentsList?commentsList.get('total'):0;
            return (
                <CommentsTitle resource={rowData} total={total}/>
            );
        }else if (sectionID == 'comments'){
            return (
                <Comments resource={rowData} onThumbsUp={this.props.addPraiseForComments} onComment={this._onComment}/>
            );
        }else if (sectionID == 'space'){
            return (
                <View style={{width: width,height: 20,backgroundColor: 'white',}}/>
            );
        }
        return null;
    }

    render() {

        let {resource} = this.props;
        let {
            articleId,
        	article,
            author,
            content,
            brand,
            otherArticle,
            weixin,
            goods_group_Filter,
            wechat,
            commentsList,
            addComment,
            addPraiseInfo,
        } = resource;

        let list = content?content.get('data'):null;
        let comments = commentsList?commentsList.get('data'):null;

        let dataSource = {
            detailList: list&&list.size>0?list.toArray():[],
            weixin: [weixin],
            detailBrand: [brand],
            detailOtherArticle: [otherArticle],
            tags:[article],
            weChatPublic: [wechat],
            commentsTitle: [addPraiseInfo],
            comments: comments&&comments.size>0?comments.toArray():[],
            space: ['1'],
        };

        let isFetching = content.isFetching || article.isFetching || author.isFetching;
        let isFavor = addPraiseInfo.get('isFavor')?addPraiseInfo.get('isFavor'):'N';
        let isPraise = addPraiseInfo.get('isPraise')?addPraiseInfo.get('isPraise'):'N';
        let isFavorIcon = isFavor=='Y' ? require('../../image/sc_icon.png') : require('../../image/wsc_icon.png');
        let isPraiseIcon = isPraise=='Y' ? require('../../image/sc_icon.png') : require('../../image/wsc_icon.png');

        return (
            <View style={styles.container}>
                {!isFetching?<Animated.View style={{width: width,height: height - 64,marginTop:this.state.viewMarginTop}}>
                    <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}
                        keyboardDismissMode={'on-drag'}
                    />
                    <View style={{width: width,height: 1,backgroundColor: '#e5e5e5',}}/>
                    <View style={styles.commtentBottomView}>
                        <TextInput
                               style={styles.inputStyle}
                               placeholder = '你好，'
                               returnKeyType = 'send'
                               enablesReturnKeyAutomatically = {true}
                               onSubmitEditing = {this._onSubmitEditing}
                               clearButtonMode = 'while-editing'
                               ref = 'textInput'/>
                        <TouchableOpacity onPress={()=>{
                            this.props.onPressConcerns&&this.props.onPressConcerns(isFavor)}
                        }>
                            <Image style={styles.favIcon} source={isFavorIcon}/>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.props.addPraiseForArtivle&&this.props.addPraiseForArtivle(isPraise)}}>
                            <Image style={styles.thumbsUpIcon} source={isPraiseIcon}/>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
                :<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,
    },
    commtentBottomView: {
        width: width,
        height: 60,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
    },
    inputStyle: {
        backgroundColor: '#e0e0e0',
        width: width - 120,
        height: 40,
        marginLeft: 10,
        marginTop: 10,
        borderRadius: 5,
    },
    favIcon: {
        height: 20,
        width: 20,
        marginLeft: 30,
    },
    thumbsUpIcon: {
        height: 20,
        width: 20,
        marginLeft: 20,
    },
});