'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
    Platform,
} from 'react-native';
import {getSlicedUrl} from '../../../classify/utils/Utils';



export default class List extends Component {

    constructor(props) {
        super(props);
        this._renderHeader = this._renderHeader.bind(this);
        this.state = {
			width: Dimensions.get('window').width,
			height: Dimensions.get('window').width,
		};
    }

    componentDidMount() {
        let src = this.props.resource.src;
        let bigPic = getSlicedUrl(src, 640, 640, 2);
       Image.getSize(bigPic, (width, height) => {
           let newWidth = Dimensions.get('window').width;
           let newHeight = Dimensions.get('window').width/width*height;
            this.setState({width: newWidth, height: newHeight });
       });
     }

     _renderHeader() {
         let {author} = this.props.resource.toJS();
         if (this.props.type == 'editor' || !author) {
             return null;
         }
         let {
             url,
             avatar,
             name
         } = author;
         return (
             <TouchableOpacity onPress={()=>{this.props.onPressHeader&&this.props.onPressHeader(url)}}>
             <View style={styles.headerContainer}>
                 <Image style={styles.avatar} source={{uri:avatar}}/>
                 <Text style={styles.name}>{name}</Text>
             </View>
             </TouchableOpacity>
         )
     }

    render() {
        let tagMap = {
                        '潮品'     :require('../../image/chaopin_icon.png'),
                        '话题'     :require('../../image/huati_icon.png'),
                        '潮人'     :require('../../image/chaoren_icon.png'),
                        '搭配'     :require('../../image/dapei_icon.png'),
                        '小贴士'   :require('../../image/xiaotieshi_icon.png'),
                        '专题'     :require('../../image/zuanti_icon.png')
                      };
        let {
            browse,
            category_name,
            intro,
            isPraise,
            praise_num,
            publish_time,
            src,
            title,
            views_num,
            url,
            share,
            id,
        } = this.props.resource.toJS();
        let urlAry = url.split('&');
        let shareParam = {
            title,
            'content': intro,
            'image': src,
            'url': urlAry[0],
        };
        let bigPic = getSlicedUrl(src, 640, 640, 2);
        let tagImg = tagMap[category_name];
        if (!tagImg) {
            tagImg = "../../image/chaopin_icon.png";
        }
        let likeImg = isPraise == 'N'?require('../../image/wsc_icon.png'):require('../../image/sc_icon.png');
        let isLike = isPraise == 'N';
        return (
            <TouchableOpacity activeOpacity={0.5} onPress={() => {
				this.props.onPressCell&&this.props.onPressCell(url, this.props.rowID, id);
			}}>
            <View style={styles.container}>
                <View style={styles.sapatorView}/>
                {this._renderHeader()}
                <Image style={styles.image,{width: this.state.width, height: this.state.height}} source={{uri:bigPic}}>
                    <Image style={styles.tagContainer} source={tagImg}>
                        <Text style={styles.tagText}>{category_name}</Text>
                    </Image>
                </Image>
                <Text style={styles.titleText}>{title}</Text>
                <Text style={styles.contentText} numberOfLines={3}>{intro}</Text>
                <View style={styles.toolContainer}>
                    <Image source={require('../../image/time_icon.png')} style={styles.iconThumb}resizeMode={'contain'}></Image>
                    <Text style={styles.text}>{publish_time}</Text>
                    <Image source={require('../../image/shared_view_icon.png')} style={styles.iconThumb}resizeMode={'contain'}></Image>
                    <Text style={styles.text}>{views_num}</Text>
                    <TouchableOpacity style={styles.likeButton} onPress={()=>{this.props.onPressLike&&this.props.onPressLike(id, isLike)}}>
                        <Image source={likeImg}/>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.shareButton} onPress={()=>{this.props.onPressShare&&this.props.onPressShare(shareParam)}}>
                        <Image source={require('../../image/shared_sharebuttom_highlighted.png')}/>
                    </TouchableOpacity>
                </View>
            </View>
			</TouchableOpacity>

        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    contentContainer: {
        backgroundColor: 'white',
    },
    sapatorView: {
        backgroundColor: 'white',
        width: width,
        height: 16,
        borderColor: 'rgb(215, 215, 215)',
        borderTopWidth: 1,
        borderBottomWidth: 1,
    },
    headerContainer: {
        height: 60,
        width: width,
        backgroundColor: 'white',
        flexDirection: 'row',
    },
    avatar: {
        width: 30,
        height: 30,
        borderRadius: 15,
        marginLeft: 17,
        marginTop: 15,
    },
    name: {
        fontSize: 17,
        color: 'rgb(83, 83, 83)',
        textAlign: 'left',
        width: width - 80,
        marginTop: 22,
        marginLeft: 17,
    },
    image: {
        width: width,
        backgroundColor: 'gray',
        height: width,
    },
    tagContainer: {
        width: 88,
        height: 25,
        alignItems: 'center',
        flexDirection: 'column',
    },
    tagText: {
        backgroundColor: 'transparent',
        color: 'white',
        fontSize: 15,
        textAlign: 'center',
        paddingTop: 5,
        paddingRight: 20,
    },
    titleText: {
        backgroundColor: 'white',
        color: 'black',
        fontSize: 22,
        marginLeft: 16,
        width: width -32,
        marginTop: 20,
    },
    contentText: {
        backgroundColor: 'white',
        color: 'gray',
        fontSize: 14,
        marginLeft: 16,
        width: width - 32,
        lineHeight: 25,
    },
    likeButton: {
        position: 'absolute',
        width: 17,
        height: 16,
        left: width - 100,
        top:14,
    },
    shareButton: {
        position: 'absolute',
        width: 44,
        height: 44,
        left: width - 60,
        top:0,
    },
    toolContainer: {
        flexDirection: 'row',
        height: 45,
        width:width,
        alignItems: 'center',
        marginTop: 5,
    },
    iconThumb: {
        marginLeft: 16,
        height: 12,
        width:20,
    },
    text: {
        marginLeft: 5,
        fontSize: 12,
        color: 'gray'
    },
});