import React, { useEffect, useState } from "react";
import axios from "axios";
import { getImageUrl } from "educoder";
import { Breadcrumb, Spin, Empty } from "antd";
import { Link } from "react-router-dom";
import {
  WhiteBack,
  Box,
  Long,
  Short,
  Gap,
  FlexAJ,
  AlignCenter,
  P,
} from "./css/layout";
import Title from "./Component/Title";
import RenderHtml from "../components/render-html";
import { Type, Tag } from "./Component/ItemType";
import Drop from "./Component/ItemDropDown";
import UserInfo from "./Component/UserInfo";
import Prise from "./Component/Prise";
import ListItem from "./Component/ListItem";
import AuthorCard from "./Component/AuthorCard";
import BestItem from "./Component/BestItem";
import Original from "./image/original.png";
import Comments from "./new_comments/comments";
import Attachments from '../forge/Upload/attachment';
function memo_show(props) {
  const memo_id = props.match.params.id;
  const current_user = props.current_user;

  const [memo, getMemo] = useState(null);
  const [memoUser, getMemoUser] = useState(null);
  const [replies, setReplies] = useState([]);
  const [memoImage, setMemoImage] = useState(null);
  const [recent_memos, setRecentmemos] = useState([]);
  const [bannedPermission, setPermission] = useState(undefined);
  const [isBanned, setIsBanned] = useState(false);
  const [page, setListPage] = useState(1);
  const [limit, setLimitType] = useState(5);
  const [isSpin, setSpinType] = useState(false);
  const [dropPermission, setDropPermission] = useState({});
  useEffect(() => {
    init();
    related_memos();
  }, [memo_id]);

  async function init() {
    setSpinType(true);
    let url = `/memos/${memo_id}.json`;
    axios
      .get(url)
      .then((result) => {
        if (result) {
          let per = {
            admin:result.data && result.data.is_current_admin,
            login: result.data && result.data.current_login,
            banned_permission:result.data.banned_permission,
            is_currentUser: result.data.author_info ? result.data.author_info.is_current_user : undefined, 
            is_fine: result.data.memo && result.data.memo.is_fine,
            sticky: result.data.memo && result.data.memo.sticky,
            memo_watched: result.data.memo && result.data.memo.memo_watched,
            is_deleted:result.data.memo && result.data.memo.apply_destroy
          }
          setPermission(per);

          getMemo(result.data.memo);
          setMemoImage(result.data.memo_image_info); //封面信息
          setRecentmemos(result.data.recent_memos);
          setIsBanned(result.data.is_banned);
          getMemoUser(result.data.author_info);
        }
        setSpinType(false);
      })
      .catch((e) => {
        setSpinType(false);
        console.log(e);
      });
  }

  function related_memos() {
    let url = `/memos/${memo_id}/related_memos.json`;
    axios
      .get(url)
      .then((result) => {
        if (result) {
          setReplies(result.data.memos);
        }
        setSpinType(false);
      })
      .catch((e) => {
        setSpinType(false);
        console.log(e);
      });
  }

  return (
    <div className="clearfix educontent pt20 minH400">
      <Spin spinning={isSpin}>
        {memo && memoUser ? (
          <div>
            <Breadcrumb separator=">" style={{ marginBottom: "10px" }}>
              <Breadcrumb.Item>
                <Link to={`/forums`}>论坛</Link>
              </Breadcrumb.Item>
              {memo && memo.forum_tag && memo.forum_tag.id && (
                <Breadcrumb.Item>
                  <Link to={`/forums/theme/${memo && memo.forum_tag.id}`}>
                    {memo && memo.forum_tag.title}
                  </Link>
                </Breadcrumb.Item>
              )}
              <Breadcrumb.Item>
                {memo ? memo.subject : "帖子详情"}
              </Breadcrumb.Item>
            </Breadcrumb>
            <Box>
              <Long>
                <WhiteBack>
                  <div style={{ padding: "0px 30px" }}>
                    <Title className="headerInfo">
                      <div className="headerInfoLeft">
                        {memo && Type(`${memo.tag_name}`)}
                        <p className="font-18 grey-3" style={{ marginBottom: "0px",maxWidth:"514px"}}>
                          {memo && memo.subject}
                        </p>
                        {memo && memo.is_fine && Tag("精华")}
                        {memo && memo.sticky && Tag("置顶")}
                      </div>
                      <div style={{width:"130px",textAlign:"right"}}>
                        {current_user && current_user.login ? (
                          <Drop permission={bannedPermission} id={memo_id} calbackFunc={init} confirm={props.confirm}/>
                        ):""}
                      </div>
                      {memo && memo.is_original && (
                        <img
                          src={Original}
                          className="originalTag"
                          width="80px"
                        />
                      )}
                    </Title>
                    <AlignCenter className="font-12 pt15 pb15">
                      <UserInfo
                          url={getImageUrl(memoUser.image_url)}
                          name={memoUser.username}
                          login={memoUser.login}
                        />

                      <span className="icon-wrap ml20">
                        <i className="iconfont icon-zhengyan font-18"></i>
                        <span className="span-text">
                          {memo && memo.viewed_count}
                        </span>
                      </span>
                      <span className="icon-wrap ml20">
                        <i className="iconfont icon-pinglun1 font-14"></i>
                        <span className="span-text">
                          {memo && memo.replies_count}
                        </span>
                      </span>
                      <span className="grey-8 ml20">
                        {memo && memo.published_time}
                      </span>
                      {memo && memo.apply_destroy && (
                        <span className="orange ml20">已申请删帖</span>
                      )}
                    </AlignCenter>

                    <div className="bor-bottom-greyE pb20 mb15">
                      {memoImage && (
                        <div className="pb20">
                          <img src={memoImage.url} style={{width: "100%"}}></img>
                        </div>
                      )}

                      <RenderHtml
                        className="tipsContent"
                        value={memo.content}
                      />
                      {memo.attachment_url && memo.attachment_url.length > 0 && 
                      <Attachments
                      attachments={memo.attachment_url}
                      canDelete={false}
                    />}
                    </div>
                    {!memo.is_original && memo.reprint_link && (
                      <p className="font-12 grey-8">转载自：{memo.reprint_link}</p>
                    )}
                    <Prise
                      isPrised={memo.user_praise}
                      num={memo.praises_count}
                      memo_id={memo.id}
                      container_type="Memo"
                      current_login={memoUser && memoUser.current_login}
                      props={props}
                    />
                  </div>
                </WhiteBack>
                <WhiteBack className="mt15">
                <Comments
                    target_id={memo && memo.id}
                    target_type="memos"
                    current_user_image={memoUser && memoUser.current_image_url}
                    current_login={memoUser && memoUser.current_login}
                    props={props}
                  />
                </WhiteBack>
                {
                  replies && replies.length > 0 && 
                  <WhiteBack className="mt15">
                  <Title>
                    <span className="greenLiftLine">相关推荐</span>
                  </Title>
                  <ListItem memos={replies} calbackFunc={related_memos} current_user={current_user} confirm = {props.confirm}/>
                </WhiteBack>
                }
              </Long>
              <Short>
                <Gap>
                  <AuthorCard user={memoUser} />
                  <WhiteBack className="mt15">
                    <Title>
                      <span>作者最近文章</span>
                      <a
                        className="font-12 grey-9"
                        href={`/accounts/${memoUser && memoUser.login}/memos`}
                      >
                        更多
                        <i className="font-12 iconfont icon-youjiantou ml5"></i>
                      </a>
                    </Title>
                    <div className="memo-detail-ul">
                    <BestItem memos={recent_memos} selectKey={["recommend"]} />
                    </div>
                    
                  </WhiteBack>
                </Gap>
              </Short>
            </Box>
          </div>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className="pd200"></Empty>
        )}
      </Spin>
    </div>
  );
}

export default memo_show;
