'use strict';

import ReactNative from 'react-native';
import React, { Component } from 'react'
import Immutable from 'immutable';

const {
  TouchableOpacity,
  Image,
  Text,
  Dimensions,
  StyleSheet
} = ReactNative;

export default class EditorTalk extends Component {
  constructor(props) {
    super(props);
    this._handleData = this._handleData.bind(this);
    this._handleParamsJumpWithUrl = this._handleParamsJumpWithUrl.bind(this);
    this._handleTextStyleError = this._handleTextStyleError.bind(this);
  }
  
  shouldComponentUpdate(nextProps) {
    if (Immutable.is(nextProps.htmlcontent, this.props.htmlcontent)) {
      return false;
    } else {
      return true;
    }
  }

  _handleData() {
    const htmlcontent = this.props.htmlcontent ? this.props.htmlcontent.toJS() : {};
    let  mainTitlelist  = htmlcontent && htmlcontent.shareMainTitle && htmlcontent.shareMainTitle.textlist ? htmlcontent.shareMainTitle.textlist : [{'text':'"潮流口令"'}];
    let  subTitlelist = htmlcontent && htmlcontent.shareSubTitle && htmlcontent.shareSubTitle.textlist ? htmlcontent.shareSubTitle.textlist : [];
    let  contextlist = htmlcontent && htmlcontent.context && htmlcontent.context.textlist ? htmlcontent.context.textlist: [];
    let url = htmlcontent && htmlcontent.url ? htmlcontent.url : '';
    return {
      mainTitlelist,
      subTitlelist,
      contextlist,
      url
    }
  }

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

  _handleTextStyleError(item, index) {
    let newItem = item;
    if (item.text) {
      newItem = Object.assign({}, item)
      delete newItem['text'];
      delete newItem['size'];
    }
    return <Text key={index} style={newItem}>{item.text}</Text>
  }

  render() {
    let { mainTitlelist, subTitlelist, contextlist, url } = this._handleData();
    let image = this.props.image;
    let {resource} = this.props;
    let resourceData = resource.toJS();

    if (!resource || resource.size === 0) {
        return null;
    }
    return (
      <TouchableOpacity
        activeOpacity={1}
        style={{width: width, height: sliderHeight}}
        yh_exposureData={resourceData.yh_exposureData}
        onPress={() => {
          this._handleParamsJumpWithUrl(resourceData.template_id, resourceData.template_name, url, resourceData.yh_clickData);
        }}
      >
        <Image 
          source={image} 
          style={styles.backgroundImage}
        />
        <Text style={styles.bannerMainTitle}>{mainTitlelist.map(this._handleTextStyleError)}</Text>
        <Text style={styles.bannerSubTitle}>
          {subTitlelist.map(this._handleTextStyleError)}
        </Text>
        <Text style={styles.bannerContext}>
          {
            contextlist.map(this._handleTextStyleError)
          }
        </Text>
      </TouchableOpacity>
    )
  }
}

let { width } = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let sliderHeight = 90 * DEVICE_WIDTH_RATIO;

let styles = StyleSheet.create({
  backgroundImage: {
    width: width, 
    height: '100%', 
    position:'absolute', 
    marginTop: 0, 
    marginBottom:0
  },
  bannerMainTitle: {
    fontSize: 16,
    color: '#000000',
    textAlign:'center',
    marginTop:14,
  },
  bannerSubTitle: {
    fontSize:12,
    color: '#000000',
    textAlign:'center',
    marginTop:8,
  },
  bannerContext: {
    fontSize:9,
    color: '#000000',
    textAlign:'center',
    marginTop:6,
  }
});