import React, { useEffect, useState } from "react";
import { Pagination, Menu, Spin } from "antd";

import {
  Box,
  Long,
  Short,
  Gap,
  WhiteBack,
  LeftLine,
  AlignCenter,
} from "./css/layout";
import Title from "./Component/Title";
import ListItem from "./Component/ListItem";
import "./css/All.scss";
import ListSearch from "./Component/ListSearch";
import UrlItem from "./Component/UrlItem";
import BestItem from "./Component/BestItem";
import DoubleItem from "./Component/DoubleItem";
import "./css/Theme.scss";
import { Link } from "react-router-dom";
import axios from "axios";

const PAGESIZE = 10; // 首页帖子每页只展示5条
function aa(props) {
  const current_user = props.current_user;
  const [data, setData] = useState(undefined); //接口所有数据
  const [memos, setMemos] = useState([]); //帖子列表
  const [sort, setSort] = useState("published_at"); //最新最热
  const [listSpin, setListSpin] = useState(true);
  const [memosCount, setMemosCount] = useState([]); //帖子数量

  const [page, setPage] = useState(1); //分页
  const [search, setSearch] = useState(undefined); //搜索内容
  const [selectKey, setSelectKey] = useState(["hot"]);

  const [hotMemos, setHotMemos] = useState([]); //热门推荐、版主推荐
  const [forumSections, setForumSections] = useState([]); //二级模块

  const [plate, setPlate] = useState(undefined); // 所有版块
  useEffect(() => {
    init();
  }, [page, search, sort]);

  async function init() {
    setListSpin(true);
    let url = `/memos.json`;
    axios
      .get(url, {
        params: { page, search, sort , limit:PAGESIZE },
      })
      .then((result) => {
        if (result) {
          setData(result.data);
          setMemos(result.data.memos);
          setListSpin(false);
          setMemosCount(result.data.memos_count);
          setHotMemos(result.data.hottest_memos);
          setForumSections(result.data.forum_sections);
        }
      })
      .catch((e) => {
        console.log(e);
      });
  }

  useEffect(() => {
    async function init() {
      let url = `/forum_sections.json`;
      axios
        .get(url, {
          params: { is_detail: true },
        })
        .then((result) => {
          if (result) {
            setPlate(result.data.forum_sections);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    }
    init();
  }, []);
  // 翻页
  function changePage(page) {
    setPage(page);
  }
  // 搜索
  function onSearch(e) {
    setSearch(e);
  }

  function changeMenu(e) {
    setSelectKey(e.key);
    if (e.key === "hot") {
      setHotMemos(data.hottest_memos);
    } else {
      setHotMemos(data.recommend_memos);
    }
  }

  function changeSort(value) {
    setSort(value);
  }
  return (
    <div className="clearfix educontent pt20">
      <Box>
        <Long>
          <WhiteBack>
            <Title>
              <span>论坛首页</span>
              <AlignCenter>
                <span
                  onClick={() => changeSort("published_at")}
                  className={
                    sort === "published_at" ? "green cPointer" : "cPointer"
                  }
                >
                  最新
                </span>
                <LeftLine
                  onClick={() => changeSort("replies_count")}
                  className={
                    sort === "published_at" ? "cPointer" : "green cPointer"
                  }
                  style={{ fontSize: "16px" }}
                >
                  最热
                </LeftLine>
              </AlignCenter>
            </Title>
            <Spin spinning={listSpin}>
              <div style={{ minHeight: "868px" }}>
                <ListItem
                  memos={memos}
                  current_user={current_user}
                  calbackFunc={init}
                  confirm={props.confirm}
                />
              </div>
            </Spin>
            <div className="center" style={{ padding: "25px 0px" }}>
              <Pagination
                showQuickJumper
                current={page}
                onChange={changePage}
                total={memosCount}
                pageSize={PAGESIZE}
              />
            </div>
          </WhiteBack>
        </Long>
        <Short>
          <Gap>
            <WhiteBack style={{ marginBottom: "15px" }}>
              <div style={{ padding: "20px" }}>
                <ListSearch onSearch={onSearch} current_user={current_user}  showLoginDialog={props && props.showLoginDialog}/>
              </div>
              <div style={{ padding: "0px 20px", borderTop: "1px solid #eee" }}>
                <UrlItem user={current_user} />
              </div>
            </WhiteBack>
            <WhiteBack style={{ marginBottom: "15px" }}>
              <Title>热门话题</Title>
              <BestItem memos={data && data.hottest_memos} selectKey={selectKey} />
            </WhiteBack>
            <WhiteBack>
              <Title>版主推荐</Title>
              <BestItem memos={data && data.recommend_memos} selectKey={selectKey} />
            </WhiteBack>
          </Gap>
        </Short>
      </Box>
      {plate && plate.length > 0
        ? plate.map((item, key) => {
            return item.children_tags && item.children_tags.length > 0 ? (
              <WhiteBack style={{ marginBottom: "15px" }}>
                
                {/* <Title className="fwt-600">{item.name}</Title> */}
                <Title className="fwt-600">
                <Link to={`/forums/theme/${item.id}`}>
                  {item.name}
                </Link>
                </Title>

                <DoubleItem plate={item.children_tags} {...props} />
              </WhiteBack>
            ) : (
              ""
            );
          })
        : ""}
    </div>
  );
}
export default aa;
