import React, { useEffect, useState } from "react";
import axios from "axios";
import { Spin, Menu, Button, Empty, Row, Pagination } from "antd";
import "./menu.scss";
import "./user.scss";
import ProjectItem from "./ProjectItem";
import { PagenationDiv } from "../css/projects";

function user_projects(props) {
  const user_login = props.match.params.login;
  const [is_current_uesr, setIsCurrentUser] = useState(false);
  const [projects, getProjectsList] = useState([]);
  const [projectsSize, setProjectsSize] = useState(0);
  const [page, setListPage] = useState(1);
  const [type, setListType] = useState("");
  const [p, setSelectType] = useState("a");
  const [order, setOrderType] = useState("desc");
  const [limit, setLimitType] = useState(16);
  const [isSpin, setSpinType] = useState(false);
  useEffect(() => {
    if (props.location.pathname.indexOf("l_projects") > -1) {
      setListType("l_projects");
    } else {
      setListType("p_projects");
    }
  }, [props.location]);

  useEffect(() => {
    async function init() {
      setSpinType(true);
      let url = `/users/${user_login}/user_projects.json`;
      axios
        .get(url, {
          params: { page, type, p, order, limit },
        })
        .then((result) => {
          if (result) {
            getProjectsList(result.data.projects);
            setProjectsSize(result.data.projects_size);
            setIsCurrentUser(result.data.is_current_user);
          }
          setSpinType(false);
        })
        .catch((e) => {
          setSpinType(false);
          console.log(e);
        });
    }
    if(type.length > 0){
      init();
    }
    
  }, [page, type, p, order]);

  const select_project = (e) => {
    setSelectType(e.key);
  };
  const select_order = () => {
    setOrderType(order === "desc" ? "asc" : "desc");
  };

  const handleChangePage = (page) => {
    setListPage(page);
  };

  return (
    <div className="minH300">
      {is_current_uesr && (
        <div className="user-submenu">
          <Menu
            onClick={(e) => select_project(e)}
            selectedKeys={p}
            mode="horizontal"
          >
            <Menu.Item key="a">全部</Menu.Item>
            <Menu.Item key="1">公开</Menu.Item>
            <Menu.Item key="0">私有</Menu.Item>
          </Menu>
        </div>
      )}
      <div className="grid-item-left user-project-size">
        <span className="color-grey font-12">共{projectsSize}个项目</span>
        <Button
          type="link"
          className="text-right"
          onClick={() => select_order()}
        >
          <span className="color-grey font-12">
            {order === "desc" ? "最近更新" : "最远更新"}
          </span>
        </Button>
      </div>
      <Spin spinning={isSpin}>
        {projects && projects.length > 0 ? (
          <Row gutter={20}>
            {projects.map((item, key) => {
              return <ProjectItem project={item} key={key}></ProjectItem>;
            })}
          </Row>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className="pd100"></Empty>
        )}
      </Spin>
      {projectsSize > limit && (
        <PagenationDiv>
          <Pagination
            showQuickJumper
            current={page}
            onChange={handleChangePage}
            total={projectsSize}
            pageSize={limit}
          />
        </PagenationDiv>
      )}
    </div>
  );
}
export default user_projects;
