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


function ShareButton(props) {
  return (
    <TouchableOpacity
      activeOpacity={1}
      style={styles.shareButton}
      onPress={() => {
        props.shareAction && props.shareAction(props.rowData);
      }}
    >
      <Image source={require('../../images/message_share.png')} style={styles.shareButtonImage}></Image>
    </TouchableOpacity>
  )
}

export class MessageCell extends Component {

  constructor(props) {
    super(props);

    this._handleParamsJumpWithUrl = this._handleParamsJumpWithUrl.bind(this);
  }

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

  _handleParamsJumpWithUrl(id, url) {
    // 为埋点提供参数组装 
    // 后期请将所有的点击事件由 resourceJumpWithUrl 修改为自己独有的事件
    // 由于多数组件都使用的 resourceJumpWithUrl ，埋点传参无法正常进行
    let params = {
      ID: id,
    };
    this.props.resourceJumpWithUrl && this.props.resourceJumpWithUrl(url, 'one', params);
  }

  render() {
    let {data} = this.props;
    if (!data || data.size === 0) {
      return null;
    }
    data = data.toJS();
    let isTrueDataType = data.type > 0 && data.type < 7 && data.type != 3
    let isShowShare = data.shareFlag && isTrueDataType ? true: false;
    
    return (
      <TouchableOpacity
        activeOpacity={1}
        style={ styles.messageContainer }
        onPress={() => {
          this._handleParamsJumpWithUrl && this._handleParamsJumpWithUrl(data.id, data.url);
        }}
      >
        <View
          style={ styles.backgroundView }
          >
          <YH_Image
            url={data.image}
            style={styles.imageStyle}
          />
          <View style={styles.textBgView}>
            <Text
              style={styles.messageText}
              numberOfLines={2}
            >{data.content}</Text>
            <View style={styles.timeAndShare}>
              <Text
                style={styles.startTimeText}
              >{data.createTime}</Text>
              {
                isShowShare ? <ShareButton rowData={data} shareAction={this.props.shareAction} /> : null
              }
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

let { width, height } = Dimensions.get('window');
let imageHeight = (width - 30) * 119 / 345;
const DEVICE_WIDTH_RATIO = width / 375;
const DEVICE_HEIGHT_RATIO = height / 667;

let styles = StyleSheet.create({
  messageContainer: {
    flex: 1,
    backgroundColor: 'white',
    marginBottom: 10 * DEVICE_HEIGHT_RATIO
  },
  backgroundView: {
    marginLeft: 15 * DEVICE_WIDTH_RATIO,
    marginRight: 15 * DEVICE_WIDTH_RATIO,
    flex: 1
  },
  textBgView: {
    flexDirection: 'column',
    flex: 1
  },
  timeAndShare: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10 * DEVICE_HEIGHT_RATIO,
    marginBottom: 20 * DEVICE_HEIGHT_RATIO,
    justifyContent: 'space-between'
  },
  imageStyle: {
    marginTop: 15 * DEVICE_HEIGHT_RATIO,
    marginBottom: 15 * DEVICE_HEIGHT_RATIO,
    width: '100%',
    height: imageHeight
  },
  messageText: {
    width: '100%',
    fontFamily: 'PingFang-SC-Regular',
    fontSize: 14,
    color: '#444444',
  },
  startTimeText: {
    fontSize: 12,
    color: '#B0B0B0',
    height: 14 
  },
  shareButton: {
    width: 80 * DEVICE_WIDTH_RATIO,
    height: 25 * DEVICE_WIDTH_RATIO,
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  shareButtonImage: {
    width: 15 * DEVICE_WIDTH_RATIO,
    height: 15 * DEVICE_WIDTH_RATIO,
  }
});

export default MessageCell;