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

import UserBrief from '../home/UserBrief';
import SubjectContent from './SubjectContent';

let {width, height} = Dimensions.get('window');

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

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

    renderDeleteCommentButton() {
        let {LZ, data, cidFrom} = this.props;
        let {cidTo, commentId} = data;
        if (LZ || (cidTo == cidFrom)) {
            return (
                <TouchableOpacity
                    style={styles.delete}
                    onPress={()=>{
                        this.props.onPressDeleteComment && this.props.onPressDeleteComment(commentId);
                    }}
                >
                    <Image
                        style={styles.deleteImage}
                        resizeMode={'contain'}
                        source={require('../../images/posting/ic_dian.png')}
                    />
                </TouchableOpacity>
            )
        } else {
            return null;
        }
    }

    render() {
        let {headIcon, nickName, timeago, LZ, cidTo, commentId, blocks, replyTo} = this.props.data;
        return (
            <TouchableOpacity
                style={styles.container}
                activeOpacity={1}
                onPress={() => {
                    this.props.onPressComment && this.props.onPressComment();
                }}
            >
                <View>
                    <View style={styles.header}>
                        <View style={styles.userContainer}>
                            <UserBrief
                                avatar={headIcon}
                                name={nickName}
                                timeago={timeago}
                                isOwner={LZ}
                                onPressAvatar={this.props.onPressAvatar}
                            />
                        </View>
                        {this.renderDeleteCommentButton(cidTo, commentId)}
                    </View>

                    <SubjectContent
                        contentWidth={width - 65}
                        left={20}
                        blocks={blocks}
                        replyTo={replyTo}
                        onPressAvatar={this.props.onPressAvatar}
                    />
                    <View style={styles.separator}/>
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 10,
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: 'white',
    },
    separator: {
        backgroundColor: '#e0e0e0',
        height: 0.5,
        width: width-30,
    },
    header: {
        flexDirection: 'row',
    },
    userContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center'
    },
    delete: {
        width: 80,
        height: 40,
        top: -10,
        right:-20,
        alignItems: 'flex-end',
    },
    deleteImage: {
        width: 20,
        height: 20,
        top:10,
        right:20,
    },
});