'use strict'

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    Dimensions,
    TouchableOpacity,
} from 'react-native'

import SlicedImage from '../../../common/components/SlicedImage';
let {width, height} = Dimensions.get('window');

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

    render() {
        return(
            <View style={[styles.container,{left:this.props.left||0}]}>
                {this.props.blocks.map((item,i) => {
                    let content = item.contentData||'';
                    if (item.templateKey === 'text') {
                        if (this.props.replyTo&&this.props.replyTo.nickName&&this.props.replyTo.nickName.length&&this.props.replyTo.uid) {
                            return(
                                <Text key={i} style={[styles.contentText,{lineHeight:this.props.left>0?20:29}]}>
                                    <Text>回复</Text>
                                    <Text style={{color:'#4a90e2'}} onPress={()=>{this.props.onPressAvatar(this.props.replyTo.uid);}}>{this.props.replyTo.nickName}</Text>
                                    <Text>:{content}</Text>
                                </Text>
                            )
                        }else {
                            return(
                                <Text key={i} style={[styles.contentText,{lineHeight:this.props.left>0?20:29}]}>{content}</Text>
                            )
                        }

                    } else if (item.templateKey === 'image') {
                        let imgWidth = this.props.contentWidth||width-30;
                        let imgHeight = imgWidth;
                        let sizeStr = item.size || '';
                        if (sizeStr.length) {
                            let ary=sizeStr.split('x');
                            let w = parseInt(ary[0]);
                            let h = parseInt(ary[1]);
                            if (w&&h) {
                                imgHeight = imgWidth/w*h;
                            }
                        }
                        if (this.props.onPressLargeImage) {
                            return (
                                <TouchableOpacity
                                    key={i}
                                    style={[styles.contentImage,{width:imgWidth,height:imgHeight}]}
                                    activeOpacity={1}
                                    onPress={()=>{
                                        this.props.onPressLargeImage(item.index);
                                    }}
                                >
                                    <SlicedImage key={i} style={{width:imgWidth,height:imgHeight}} source={{uri:content}}/>
                                </TouchableOpacity>
                            );
                        } else {
                            return(
                                <SlicedImage key={i} style={[styles.contentImage,{width:imgWidth,height:imgHeight}]} source={{uri:content}}/>
                            )
                        }
                    }
                })}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingLeft: 15,
        paddingRight: 15,
        paddingBottom: 15,
        backgroundColor: 'white',
    },
    contentText: {
        fontSize: 14,
        lineHeight: 28,
        backgroundColor: 'white',
        fontWeight: "100",
    },
    contentImage: {
        backgroundColor:'#a0a0a0',
        width:320,
        height: 320,
        marginTop: 10,
    },
});