/**
 * 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 sliceCount = width <= 320 ? 10 : 15;
        let userName = rowData.userName.length > sliceCount ? rowData.userName.slice(0,sliceCount)+'...' : rowData.userName;

        let subName = rowData.businessType === 1002 ? '评论了你' : '回复了你';

        let showIcon = (rowData.authGroupId === 3 || rowData.authGroupId === 5 || rowData.authGroupId === 7) ? true : false;

        let source;
        switch (rowData.authGroupId) {
          case 3:
            source = require('../../images/GF_big_ic.png');
            break;
          case 5:
            source = require('../../images/PP_big_ic.png');
            break;
          case 7:
            source = require('../../images/KING_big_ic.png');
            break;
          default:
        }

        return (
          <View>
              <View style={styles.headerBackground}>
                  <TouchableOpacity style={{marginLeft: 15, marginRight: 10, flexDirection:'row'}} activeOpacity={1} onPress={()=> this.props.jumpToPersonalGrassPage && this.props.jumpToPersonalGrassPage(rowData)}>
                    <YH_Image style={styles.headIcon} url={rowData.headIco} circle={true}/>
                    {showIcon ? <Image style={styles.iconImage} resizeMode="contain" source={source}/> : null}
                  </TouchableOpacity>

                  <View style={styles.textView}>
                      <TouchableOpacity activeOpacity={1} onPress={()=> this.props.jumpToPersonalGrassPage && this.props.jumpToPersonalGrassPage(rowData)}>
                        <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)}>
                      <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)}>
                  <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)}>

                    { rowData.isDelete === 'N' ?
                      <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>
                  :
                    <View style={ styles.originContainerView} >
                      <Text style={styles.deleteText} numberOfLines={1}>{'原文已被作者删除'}</Text>
                    </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,
        marginTop: 15,
        overflow: 'hidden',
        borderRadius: 20,
    },
    iconImage: {
        width: 16,
        height: 16,
        marginLeft: -12,
        marginTop: 42,
    },
    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,
    },
    deleteText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#b0b0b0',
      marginLeft: 9,
      marginRight: 16,
      marginTop: 10,
      marginBottom: 10
    },
    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'
    },
    });