/**
 * Created by zzz on 2019/3/12.
 */
'use strict';

import React, {Component} from 'react';
import {Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
import {Immutable} from "immutable";
import YH_Image from '../../../common/components/YH_Image';

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

    render() {
        let {rowData} = this.props;
        let status = rowData.businessType === 1003 ? true : false;

        let resource = rowData.coverImg ? typeof rowData.coverImg === 'string' ? JSON.parse(rowData.coverImg) : rowData.coverImg : '';
        let picItem =  resource ? typeof resource.data === 'string' ? JSON.parse(resource.data) : resource.data : '';

        let imageUrl = YH_Image.getSlicedUrl(picItem.src, 50 * DEVICE_HEIGHT_RATIO, 50 * DEVICE_HEIGHT_RATIO, 2);
        let {width, height} = Dimensions.get('window');
        let sliceCount = width <= 320 ? 10 : 15;
        let userName = rowData.userName.length > sliceCount ? rowData.userName.slice(0,sliceCount)+'...' : rowData.userName;
        let subName = '赞了你';
        switch (rowData.businessType) {
          case 1000:
            subName = '赞了你';
            break;
          case 1001:
            subName = '收藏了你';
            break;
          case 1002:
            subName = '评论了你';
            break;
          case 1003:
            subName = '回复了你';
            break;
          case 1004:
            subName = '关注了你';
            break;
          default:

        }

        return (
          <View>
              <View style={styles.headerBackground}>
                  <TouchableOpacity activeOpacity={1} onPress={()=> this.props.jumpToPersonalGrassPage && this.props.jumpToPersonalGrassPage(rowData.optUid)}>
                    <YH_Image style={styles.headIcon} url={rowData.headIco} circle={true}/>
                  </TouchableOpacity>

                  <View style={styles.textView}>
                      <TouchableOpacity activeOpacity={1} onPress={()=> this.props.jumpToPersonalGrassPage && this.props.jumpToPersonalGrassPage(rowData.optUid)}>
                        <Text style={styles.nicknameText} numberOfLines={1}>{userName}</Text>
                      </TouchableOpacity>
                      <Text style={styles.subnameText}>{subName}</Text>
                  </View>
                  <TouchableOpacity activeOpacity={1} style={styles.replyContainer} onPress={()=> this.props.jumpToShowKeyboard && this.props.jumpToShowKeyboard(rowData.userName, rowData.commentId)}>
                      <Image style={styles.replyImage} resizeMode="contain" source={require('../../images/content_reply.png')}/>
                  </TouchableOpacity>
              </View>

              <View style={styles.replyTextView}>
                  <Text style={styles.replyText} numberOfLines={2}>{rowData.commentContent}</Text>
              </View>

              { status ?

                <TouchableOpacity activeOpacity={1} onPress={() => this.props.jumpToGrassDetailPage && this.props.jumpToGrassDetailPage(rowData.articleId, rowData.rootCommentId)}>
                  <View style={styles.ownerReplyView}>
                    <Text style={{paddingLeft: 10, paddingTop: 14, paddingRight: 1, paddingBottom: 12}} numberOfLines={3}>
                      <Text style={styles.replyText}>我的评论：</Text>
                      <Text style={styles.defaultReplyText}>{rowData.parentCommentContent}</Text>
                    </Text>
                  </View>
                </TouchableOpacity>

                :

                <TouchableOpacity activeOpacity={1} onPress={() => this.props.jumpToGrassDetailPage && this.props.jumpToGrassDetailPage(rowData.articleId, rowData.rootCommentId)}>
                    <View style={ styles.originContainerView} >
                      <Text style={styles.copyText}>原文</Text>
                      { imageUrl ? <YH_Image url={imageUrl} style={styles.imageStyle} /> : null }

                      {rowData.content ?

                        <Text style={styles.originText} numberOfLines={1}>
                          <Text>{rowData.content}</Text>
                          <Text>{'...'}</Text>
                        </Text>
                        :
                        <View style={{height: 5}} />
                      }

                    </View>
                </TouchableOpacity> }

              <View style={styles.timeView}>
                <Text style={styles.startTimeText}>{rowData.createTime}</Text>
              </View>

              { this.props.showLine ?  <View style={styles.lineView}/> : null }

          </View>
        );
    }
}

let { width, height } = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
const DEVICE_HEIGHT_RATIO = height / 667;

let styles = StyleSheet.create({
    headerBackground: {
        width: width,
        height: 70,
        backgroundColor: 'white',
        flexDirection: 'row',
    },
    headIcon: {
        width: 40,
        height: 40,
        marginLeft: 15,
        marginTop: 15,
        marginRight:10,
        overflow: 'hidden',
        borderRadius: 20,
    },
    textView: {
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        marginTop: 18,
        marginBottom: 15,
    },
    nicknameText: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        color: '#222222',
    },
    subnameText: {
        fontSize: 12,
        fontFamily: 'PingFang-SC-Regular',
        color: '#B0B0B0',
    },
    replyContainer: {
        position: 'absolute',
        top: 23,
        right: 15,
        width: 60,
        height: 25,
    },
    replyImage: {
        width: 60,
        height: 25,
    },
    replyTextView: {
        width: width - 30,
        marginBottom: 15,
        marginLeft: 15,
    },
    replyText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#444444',
    },
    ownerReplyView : {
      flexDirection: 'row',
      alignItems: 'center',
      width: width - 30,
      marginLeft: 15,
      backgroundColor: '#F0F0F0',
      marginBottom: 10,
    },
    defaultReplyText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#a8a8a8',
    },
    originContainerView: {
      flex: 1,
      marginLeft: 15,
      marginRight: 15,
      marginBottom: 10,
      backgroundColor: '#f0f0f0'
    },
    copyText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#444444',
      marginTop: 10,
      marginLeft: 9,
    },
    imageStyle: {
      marginTop: 10,
      marginBottom: 4,
      marginLeft: 9,
      width: 50 * DEVICE_HEIGHT_RATIO,
      height: 50 * DEVICE_HEIGHT_RATIO,
    },
    originText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#b0b0b0',
      marginLeft: 9,
      marginRight: 16,
      marginBottom: 9,
    },
    timeView: {
      alignItems: 'flex-start',
      marginBottom: 10,
      marginLeft: 15,
    },
    startTimeText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#B0B0B0',
      height: 17
    },
    lineView: {
      marginLeft:15,
      marginRight: 0,
      width: width-15,
      height: 0.5,
      backgroundColor: '#e0e0e0'
    },
    });