import React, { useState, useEffect } from "react";
import { FlexAJ, AlignCenter, LeftLine } from "../css/layout";
import { Link } from "react-router-dom";
import { getImageUrl } from 'educoder';
import { Type, Tag } from "./ItemType";
import User from "./User";
import Drop from "./ItemDropDown";
import Nodata from '../Nodata';

export default ({ memos , current_user , calbackFunc , confirm }) => {
  const [list, setList] = useState(undefined);

  useEffect(() => {
    if (memos) {
      setList(memos);
    }
  }, [memos]);

  return (
    <ul className="forumList">
      {list && list.length > 0 ? (
        list.map((item, key) => {
          let permission = {
            index:key,
            admin:current_user && current_user.admin,
            banned_permission:item.banned_permission,
            login:current_user && current_user.login,
            is_currentUser:current_user && (item.user_login === current_user.login),
            is_fine:item.is_fine,
            sticky:item.sticky,
            memo_watched:item.memo_watched,
            user_banned_permission:item.banned_permission,
            is_deleted:item.apply_destroy
          }
          return (
            <li>
              <FlexAJ>
                <AlignCenter style={{ marginLeft: "-8px" }}>
                  <span>{Type(item.tag_name)}</span>
                  <Link 
                    className="grey-3 task-hide"
                    style={{ maxWidth: "700px" }}
                    to={`/forums/${item.id}/detail`}
                  >
                    {item.subject}
                  </Link>
                  { item.sticky === true ? <span className="ml8">{Tag("置顶")}</span> : "" }
                  { item.is_original === true ? <span className="ml8">{Tag("原创")}</span> : "" }
                  { item.is_fine === true ? <span className="ml8">{Tag("精华")}</span> : "" }
                </AlignCenter>
                <AlignCenter>
                  { item.apply_destroy ? <span className="orange font-12 mr10">已申请删帖</span> : "" }
                  {
                    current_user && current_user.login ?
                    <Drop permission={permission} id={item.id} calbackFunc={calbackFunc} confirm={confirm}/>
                    :""
                  }
                </AlignCenter>
              </FlexAJ>
              <FlexAJ className="mt8">
                <AlignCenter>
                  <User login={item.user_login} name={item.username} url={getImageUrl(item.image_url)}></User>
                  {item.forum_section_title ? <Link to={`/forums/theme/${item.forum_section_id}`}><LeftLine>{item.forum_section_title}</LeftLine></Link> : "" }
                  {item.published_time ? <LeftLine>{item.published_time}</LeftLine> : "" }
                </AlignCenter>
                <span>
                  <span class="icon-wrap">
                    <i class="iconfont icon-zhengyan font-18"></i>
                    <span class="span-text">{item.viewed_count}</span>
                  </span>
                  <span class="icon-wrap">
                    <i class="iconfont icon-dianzan2 font-14"></i>
                    <span class="span-text">{item.praises_count}</span>
                  </span>
                  <span class="icon-wrap">
                    <i class="iconfont icon-pinglun1 font-14"></i>
                    <span class="span-text">{item.replies_count}</span>
                  </span>
                </span>
              </FlexAJ>
            </li>
          );
        })
      ) : 
        <AlignCenter style={{height:"400px"}} className="bigNoData"><Nodata _html="暂无数据" /></AlignCenter>
      }
    </ul>
  );
};
