import React, { useMemo } from 'react'

import { markdownToHTML, WordsBtn, getUrl, getImageUrl } from 'educoder'

const appealStatus = {
  1: '申诉中',
  2: '申诉已撤销',
  3: '申诉成功',
  4: '申诉被拒绝',
  5: '申诉失败'
}

/**
can_delete: true
content: "qwe"
id: 81136
time: "2019-06-04T11:00:21.000+08:00"

user_image_url: "avatars/User/1"
user_login: "innov"
user_name: "社区导师"
*/
// is_appeal_info true 是匿评人匿评信息，需要统一使用头像去掉链接
export default ({ isStudent = false, isAdmin, callback, is_author, ...item }) => {

  const pre = getUrl()
  const _origin = ''

  function onDeleteReply() {
    callback('del-replay-item', item)
  }
  function cancelMyAppeal() {
    callback('cancel-my-appeal', item)
  }

  function refuseAppealScore() {
    callback('refuse-appeal-score', item)
  }

  function acceptAppealScore() {
    callback('accept-appeal-score', item)
  }

  const { id, user_info, time, appeal_status, content, is_appeal_info, can_delete } = item

  const { user_image_url, user_login, user_name } = user_info
  const imgSrc = (!user_image_url || user_image_url === '--') ? `edu_user/anony.png` : user_image_url;

  const md = useMemo(() => {
    return markdownToHTML(content)
  }, [content])


  return (
    <div className="ccomment comment_item_cont df clearfix" key={id}>
      <div className="J_Comment_Face fl">
        {is_appeal_info == true ?
          <a href={`javascript:void(0)`} target="_blank">
            <img alt="用户头像" height="50"
              src={`${pre}/images/edu_user/anony.png`} width="50" />
          </a>
          : <a href={`${_origin}/users/${user_login}`} target="_blank">
            <img alt="用户头像" height="50"
              src={`${getImageUrl(`images/` + imgSrc)}`}
              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">
                {user_login === "--" ?
                  <a className="content-username hide fl">
                    {user_name}
                  </a>
                  : <a href={`${_origin}/users/${user_login}`} className="content-username hide fl">
                    {user_name}
                  </a>}
                <span className="t_area fl">{time}</span>
                {is_appeal_info ? <span className="edu-filter-btn edu-filter-btn-4CACFF ml15 fl typestyle " >{appealStatus[appeal_status]}</span> : null}

                {
                  !is_appeal_info && can_delete == true && <a title="删除">
                    <i className="iconfont icon-shanchu mr5 fr font-14" onClick={onDeleteReply}
                      style={{ cursor: 'pointer' }}
                    ></i>
                  </a>
                }
                {
                  is_appeal_info && isAdmin && appeal_status == 1 ? <React.Fragment>
                    <WordsBtn style="grey" onClick={refuseAppealScore} className="fr ml6">拒绝申诉</WordsBtn>
                    <WordsBtn style="orange" onClick={acceptAppealScore} className="fr">接受申诉</WordsBtn>
                  </React.Fragment> : null
                }
                {
                  appeal_status == 1 && isStudent === true && is_author &&
                  <WordsBtn style="blue" className="fr mr5" onClick={cancelMyAppeal}>撤销申诉</WordsBtn>
                }
              </div>
            </div>
            <div className="comment_content  clearfix" id={`reply_content_${id}`}>
              <div className="color-grey-3" id={`reply_content_${id}`}>
                <div className={"markdown-body"} dangerouslySetInnerHTML={{ __html: md }}></div>
                <div className="cl"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div >
  )
}