import React, { useEffect, useState } from "react";
import axios from "axios";
import { Spin, Empty, Row, Pagination } from "antd";
import { PagenationDiv } from "../css/projects";
import SectionItem from "./SectionItem";
function sections(props) {
  const user_login = props.match.params.login;
  const [isSpin, setSpinType] = useState(false);
  const [forum_sections, getSections] = useState([]);
  const [page, setListPage] = useState(1);
  const [limit, setLimitType] = useState(32);
  const [sectionsSize, setSectinsSize] = useState(0);
  useEffect(() => {
    async function init() {
      setSpinType(true);
      let url = `/my_memos/${user_login}/my_interested.json`;
      axios
        .get(url, {
          params: {
            limit,
            page,
          },
        })
        .then((result) => {
          if (result) {
            getSections(result.data.forum_details);
            setSectinsSize(result.data.count);
          }
          setSpinType(false);
        })
        .catch((e) => {
          setSpinType(false);
          console.log(e);
        });
    }
    init();
  }, [page]);

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

  return (
    <div className="mt15">
      <Spin spinning={isSpin}>
        {forum_sections && forum_sections.length > 0 ? (
          <Row gutter={20}>
            {forum_sections.map((item, key) => {
              return <SectionItem forum_section={item} key={key}></SectionItem>;
            })}
          </Row>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className="pd100"></Empty>
        )}
      </Spin>
      {sectionsSize > limit && (
        <PagenationDiv>
          <Pagination
            showQuickJumper
            current={page}
            onChange={handleChangePage}
            total={sectionsSize}
            pageSize={limit}
          />
        </PagenationDiv>
      )}
    </div>
  );
}
export default sections;
