'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 LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import YH_Video from '../../../common/components/YH_Video';
import DeviceInfo from 'react-native-device-info';

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._onPressComment = this._onPressComment.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,
            relayToUsername: '',
        };
    }

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

    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){
        let endH = e.endCoordinates.height;
        let duration = e.duration;
        if (deviceId == 'iPhone10,3' || deviceId == 'iPhone10,6')
        {
            endH = endH - 34;
        }

        Animated.timing(
    　　　　this.state.viewMarginTop,
    　　　　{
    　　　　　　toValue: -endH,
    　　　　　　duration: duration,
    　　　　}
    　　).start();
    }
    _keyboardWillHide(e){
        let duration = e.duration;
        Animated.timing(
    　　　　this.state.viewMarginTop,
    　　　　{
    　　　　　　toValue: 0,
    　　　　　　duration: duration,
    　　　　}
    　　).start();
    }

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

        if (this.state.replyTo == 0) {
            replyTos = '';
            relayToUsername = '';
        }
        this.props.onSubmitForComment && this.props.onSubmitForComment(content,replyTos);

        this.refs.textInput.clear();

        if (Platform.OS === 'ios') {
        	this.refs.textInput.setNativeProps({ text: ' ' });
          setTimeout(() => {
            this.refs.textInput.setNativeProps({ text: '' });
          });
        }

        this.setState({replyTo: 0,relayToUsername: ''});
    }

    _onPressComment(id,username){
        this.setState({replyTo: id,relayToUsername: username});
        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 == 'video') {
                let data = rowData?rowData.get('data'):null;
                let url = data?data.get('src'):'';
                let title = data?data.get('video_intro'):'';
                let cover_image = data?data.get('cover_image'):'';
                let articleId = this.props.resource.articleId;

                return (
                    <View style={styles.videoView}>
                        <YH_Video style={styles.video} articleId={articleId} url={url} title={title} cover={cover_image} />
                        <View style={styles.placeholder}/>
                    </View>
                );
            }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') {
                let {resource} = this.props;
                let {
                    articleId,
                } = resource;
                return (
                    <GoodsCell resource={rowData} articleId={articleId} 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} onPressComment={this._onPressComment}/>
            );
        }else if (sectionID == 'space'){
            return (
                <View style={{width: width,height: 20,backgroundColor: 'white',}}/>
            );
        }
        return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
    }

    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/g_x_ic_h.png') : require('../../image/g_x_ic.png');
        let isPraiseIcon = isPraise=='Y' ? require('../../image/g_z_ic_h.png') : require('../../image/g_z_ic.png');
        let praiseNum = addPraiseInfo.get('praiseNum')?addPraiseInfo.get('praiseNum'):0;
        let praiseNumText = praiseNum > 999 ? ' 999+' : ' '+praiseNum+' ';

        let comlist = commentsList?commentsList.toJS():null;
        let isLoadingMore = comlist && comlist.isFetching && comlist.page > 0;
        let endReached = comlist ? comlist.endReached : false;

        return (
            <View style={styles.container}>
                {!isFetching?<Animated.View style={{flex: 1,top:this.state.viewMarginTop}}>
                    <ListView
                        ref={(ref)=>this.listView=ref}
                        yh_viewVisible = {true}//自动曝光开关
                        initialListSize={1}
                        contentContainerStyle={styles.contentContainer}
                        enableEmptySections={true}
                        showsVerticalScrollIndicator={false}
                        dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                        renderRow={this.renderRow}
                        renderHeader={this.renderHeader}
                        keyboardDismissMode={'on-drag'}
                        renderFooter={()=>{
                            if (endReached) {
                                return <View style={styles.placeholder} />;
                            } else {
                                return <LoadMoreIndicator
                                        isVisible={isLoadingMore}
                                        animating={true}
                                    />;
                            }
                        }}
                        onEndReached={() => {
                            if (comlist && comlist.data && comlist.data.length > 0) {
                                this.props.onEndReached && this.props.onEndReached();
                            }
                        }}
                    />
                    <View style={{width: width,height: 1,backgroundColor: '#e5e5e5',}}/>
                    <View style={styles.commtentBottomView}>
                        <TextInput
                               style={styles.inputStyle}
                               placeholder = {this.state.relayToUsername == '' ? '赶紧参与评论吧~' : '回复:' + this.state.relayToUsername}
                               returnKeyType = 'send'
                               enablesReturnKeyAutomatically = {true}
                               onSubmitEditing = {this._onSubmitEditing}
                               clearButtonMode = 'while-editing'
                               underlineColorAndroid = "transparent"
                               ref = 'textInput'/>
                        <TouchableOpacity onPress={()=>{
                            this.props.onPressConcerns&&this.props.onPressConcerns(isFavor=='Y'?'N':'Y')}
                        }>
                            <Image style={styles.favIcon} source={isFavorIcon}/>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.props.addPraiseForArtivle&&this.props.addPraiseForArtivle(isPraise=='Y'?'N':'Y')}}>
                            <View style={styles.thumbsUpView}>
                                <Image style={styles.thumbsUpIcon} source={isPraiseIcon}/>
                                {praiseNum > 0 ? <View style={styles.thumbsUpNumView}>
                                                    <Text style={styles.thumbsUpNumText}>{praiseNumText}</Text>
                                                 </View> : null}
                            </View>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
                :<LoadingIndicator
                    isVisible={isFetching}
                />}
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    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,
        marginBottom: 10,
        borderRadius: 5,
        padding: 5,
    },
    favIcon: {
        height: 20,
        width: Math.ceil(20 * (17/16)),
        marginLeft: 25,
    },
    thumbsUpView: {
        height: 50,
        width: 40,
        marginLeft: 20,
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    thumbsUpIcon: {
        height: 20,
        width: 20,
    },
    videoView: {
        width: width - 20,
        height: Math.ceil((width-20)*(430/730)) + 15,
        backgroundColor: 'white',
        marginLeft: 10,
    },
    video: {
        width: width - 20,
        height: Math.ceil((width-20)*(430/730)),
        backgroundColor: 'white',
    },
    placeholder: {
        width,
        height: 15,
    },
    thumbsUpNumView: {
        backgroundColor: 'red',
        borderRadius: 5,
        position: 'absolute',
        left: 12,
        top: 10,
    },
    thumbsUpNumText: {
        backgroundColor: 'transparent',
        fontSize: 10,
        color: 'white',
    },
});