import React,{PropTypes} from 'react';  
import moment from 'moment';
import cx from 'classnames';
import s from './ChatWidget.scss';

moment.locale('zh_CN');
export class Gravatar extends React.Component { 
	constructor(props) {
        super(props);    
    }
    static propTypes = {  
	    size:PropTypes.string, 
	    path:PropTypes.string,
	    globalId:PropTypes.string 
	}
    static defaultProps = {  
    	size:'36'
	}
    render () {
    	const {size}=this.props,sizeStyle={
    		height:`${size}px`,
    		width:`${size}px`
    	}
    	return (
    		<a href="javascript:;" className={cx(s.member_image)} style={sizeStyle}>
			    <img src={this.props.path} style={sizeStyle} />
			</a>
    	)
    }
}

export class MsgDayLine extends React.Component { 
	constructor(props) {
        super(props);    
    }
    static propTypes = {  
	    date:PropTypes.string.isRequired,
	    style:PropTypes.object
	} 
    render () { 
    	let date=moment(this.props.date).format('l');
		if(moment(new Date()).isSame(this.props.date, 'day')){
			date='今天';
		}
    	return (
    		<div className={cx(s.mod_msg_day)} style={this.props.style?this.props.style:{}}>
    			<h3>{date}</h3>
    		</div>
    	)
    }
}

export class MsgWorkLog extends React.Component{
    constructor(props) {
        super(props);    
    }
    static propTypes = {   
        worklog:PropTypes.object,
        onClick:PropTypes.func
    }
    render () { 
        const {worklog:{title,user_name,date,content}}=this.props;
        return (
            <div className={cx(s.mod_msg_post)} onClick={this.props.onClick}>
                <div className={cx(s.post_hd)}>
                    <span className={cx(s.post_icon,'fa','fa-file-text-o')}></span>
                    <div className={cx(s.post_hd_con)}>
                        <h3 className={cx(s.line_bottom)}><em className={cx(s.c_blue)}>#日志</em>“{title}”</h3>
                        <p>{date?moment(date).format('LL'):''}</p>
                    </div>
                </div>
                <div className={cx(s.post_bd,'my-simditor')} >
                    <div className={cx('simditor-body')} dangerouslySetInnerHTML={{__html:content}}></div>
                </div>
            </div>
        )
    }
}

export class MsgAppraise extends React.Component{
    constructor(props) {
        super(props);  
        this.addSupport=this.addSupport.bind(this);  
        this.checkSupport=this.checkSupport.bind(this);
    }
    static propTypes = {   
        worklog:PropTypes.object,
		supports:PropTypes.array,
        showSupport:PropTypes.bool,
        showStar:PropTypes.bool,
        userInfo:PropTypes.object 
    }
    static defaultProps = {
        showSupport:true,
        showStar:true
    }
    checkSupport(){
        const {userInfo,supports,addSupport}=this.props;
        let flag=false;
        supports.map((support,i)=>{
            if(support.created_by==userInfo.user_id){
                flag=true;
            } 
        });
        return flag;
    }
    addSupport(){ 
        const {addSupport}=this.props;
        if(!this.checkSupport()){
            addSupport();
        }
    }
    render () { 
        const {worklog:{rate},supports=[], showSupport,showStar,addSupport,userInfo}=this.props;
        
        console.log(userInfo);
        return ( 
            <div className={cx(s.mod_post_appraise)}>
                {showSupport&&
                <div className="fl" onClick={this.addSupport}>
                    <span className={cx(s.ui_btn,s.btn_support)}>{supports?supports.length:''}</span>
                </div>
                }
                {showStar&&
                <div className={cx(s.mod_appraise_star,'fr')}>
                    <i className={cx(rate>=1?s.active:'','fa','fa-star')}></i>
                    <i className={cx(rate>=2?s.active:'','fa','fa-star')}></i>
                    <i className={cx(rate>=3?s.active:'','fa','fa-star')}></i>
                    <i className={cx(rate>=4?s.active:'','fa','fa-star')}></i>
                    <i className={cx(rate>=5?s.active:'','fa','fa-star')}></i>
                </div>
                }
            </div> 
        )
    }
}

export class MsgHD extends React.Component{
    constructor(props) {
        super(props);    
    }
    static propTypes = {   
        worklog:PropTypes.object,
        style:PropTypes.object
    }
    render () { 
        const {worklog:{user_name,created_at}}=this.props;  
        return ( 
            <div className={cx(s.hd)}  style={this.props.style?this.props.style:{}}>
                <h3>{user_name?user_name:''}
                    <span className={cx(s.show_time)}>{/*created_at?moment(created_at).format('H:mmA'):''*/}</span>
                </h3>
                {/*<a  ><i className="fa fa-star-o"></i></a>*/}
            </div>
        )
    }
}

export class MsgBD extends React.Component{
    constructor(props) {
        super(props);    
    }
    static propTypes = {   
        worklog:PropTypes.object,
        style:PropTypes.object
    }
    render () { 
        const {worklog:{created_at}}=this.props; 
        return ( 
            <div className={cx(s.bd)}  style={this.props.style?this.props.style:{}}>
                <p>在<a  className={cx(s.c_blue)}>#日志管理</a>中{created_at?moment(created_at).format('YYYY-MM-DD HH:mm'):''}发布一条日志</p>
            </div> 
        )
    }
}

export class MsgReply extends React.Component{
    constructor(props) {
        super(props);    
    }
    static propTypes = {   
        size:PropTypes.string, 
        path:PropTypes.string,
        comment:PropTypes.object,
        style:PropTypes.object
    }
    render () { 
		const comment = this.props.comment;

        return (  
            <div className={cx(s.member_msg_reply)} > 
                <Gravatar size='16' path={this.props.path} /><span>{comment.user_name}</span>
                <div className={cx(s.msg_reply_con)}>
                    <p>{comment.content}</p>
                </div>
                <p className={cx(s.msg_reply_time)}>{comment.created_at}</p>
            </div> 
        )
    }
}

export class MsgComment extends React.Component{
    constructor(props) {
        super(props);    
    }
    static propTypes = {    
        comment:PropTypes.object, 
        style:PropTypes.object
    }
    render () { 
        const {comment}=this.props; 
        return ( 
            <div className={cx(s.hd)}  style={this.props.style?this.props.style:{}}>
                <h3>{comment.user_name}
                    <span className={cx(s.show_time)}>{comment.created_at?moment(comment.created_at).format('lll'):''}</span>
                </h3>
                <p style={{wordBreak:'break-all'}}>{comment.content}</p>
            </div> 
        )
    }
}

export class MsgTime extends React.Component{
    constructor(props) {
        super(props);    
    }
    static propTypes = {  
        date:PropTypes.string.isRequired,
        style:PropTypes.object
    } 
    render () { 
        const {date}=this.props;
        return (
            <span className={cx(s.mod_msg_time)} style={this.props.style?this.props.style:{}}>
               <small> {date?moment(date).format('H:mmA'):''}</small>
            </span>
        )
    }
}

export class MsgApproval extends React.Component{
    constructor(props) {
        super(props);    
    }
    static propTypes = {  
        approval:PropTypes.object,
        style:PropTypes.object
    } 
    render () {  
        const {approval:{title,content,extra,biz_status}}=this.props;
        const {sub_type}=extra;
        let approvalTitle='',approvalMeta='',approval_icon='ts_icon_pencil',approval_icon_color='';
        switch(sub_type) {
        case 'notification':    
              approvalTitle='通知';
              approvalMeta=title;
              approval_icon='ts_icon_bell_o';
              approval_icon_color='red';
              break;
        case 'waiting_approve':
            approvalTitle='等待审批';
            approvalMeta=title; 
            approval_icon='ts_icon_pencil';
            approval_icon_color='green';
            break;
        default:
            break;
        }
        return (
            <div className={cx(s.approval_msg_wrap)}>
                <div className={cx(s.approval_header)}>
                    <i className={cx('ts_icon',approval_icon,s.approval_icon,s[approval_icon_color])}></i>
                    <h4 className={cx(s.approval_title)}>{approvalTitle}</h4>
                    <p className={cx(s.approval_header_meta)}>{approvalMeta}</p>
                    {biz_status=='approved'&&
                        <div className={cx(s.statu)}>已同意</div>
                    }
                </div>
                <div className={cx(s.approval_body)}>
                    <p className={cx()}>点击查看详情</p>
                </div>
            </div>
        )
    }
}

 

export default {
	Gravatar,
	MsgDayLine,
    MsgWorkLog,
    MsgAppraise,
    MsgHD,
    MsgBD,
    MsgReply,
    MsgComment,
    MsgTime,
    MsgApproval 
};