import React, { useMemo } from "react";
import { getImageUrl, markdownToHTML } from 'educoder';
import { Tooltip } from 'antd'

const _origin = ''
export default ({ item, onDelete, isChildCommentPagination, loadMoreChildComments }) => {
	const { content, id, user_login, image_url, username, comment_role, score, is_invalid, time, children, isAllChildrenLoaded, } = item
	const md = useMemo(() => {
		return markdownToHTML(content)
	}, [content])

	function onDeleteHandler() {
		onDelete(item)
	}

	function onLoadMoreComments() {
		loadMoreChildComments(item)
	}

	return (
		<div className="comment_item_cont appraise df clearfix" key={id}>
			<div className="J_Comment_Face fl">
				<a href={`${_origin}/users/${user_login}`} target="_blank">
					<img alt="用户头像" height="50" src={getImageUrl(`images/${image_url}`)} width="50" />
				</a>
			</div>
			<div className="t_content fl">
				<div className="J_Comment_Reply">
					<div className="comment_orig_content" style={{ margin: "0px" }}>
						<div className="J_Comment_Info clearfix mt3">
							<div className="t_info fl">
								<a href={`${_origin}/users/${user_login}`} className="content-username hide fl"> {username}（{comment_role}） </a>
								<span className="t_area fl">{time}</span>
								{score != null && score >= 0 && <span className="score_area fl">{score}分</span>}

								{!is_invalid && item.delete && <Tooltip title={"删除"} >
									<i className="iconfont icon-shanchu mr5 fr" style={{ marginLeft: '6px' }}
										onClick={onDeleteHandler}>
									</i>
								</Tooltip>}
								{is_invalid ? <span className="validate_area fr">失效</span> : ''}
							</div>
						</div>

						{!!md ? <div className="comment_content  clearfix" id={`reply_content_${id}`}>
							<div className="color-grey-3" id={`reply_content_${id}`}>
								<div className={"break_word_comments"} dangerouslySetInnerHTML={{ __html: md }}></div>
								<div className="cl"></div>
							</div>
						</div> : <span className="color656565 mt2 color-grey-9 font-12 mr8" style={{ display: 'inline-block' }}>{"暂未写评语"}</span>}

						<div className="childrenCommentsView">
							{(children && children.length) ? <div className="trangle"></div> : ''}
							{isAllChildrenLoaded != true && children && isChildCommentPagination == true && children.length >= 5 ?
								<Tooltip title={"点击查看更多回复"} disableFocusListener={true}>
									<div className="loadMoreChildComments" onClick={onLoadMoreComments}>
										<i className="iconfont icon-xiajiantou"></i>
									</div>
								</Tooltip>
								: ''}
						</div>
						<p className="fr orig_reply"></p>
					</div>
				</div>
			</div>
		</div>

	)
}