import React, { useEffect, useState } from "react";
import axios from "axios";
import { Spin, Empty, Row, Pagination } from "antd";
import { PagenationDiv } from "../css/projects";
import BlockItem from "./BlockItem";

function block_users(props) {
  const user_login = props.match.params.login;
  const [isSpin, setSpinType] = useState(false);
  const [users, setUsers] = useState([]);
  const [page, setListPage] = useState(1);
  const [limit, setLimitType] = useState(30);
  const [usersSize, setSectinsSize] = useState(0);
  useEffect(() => {
    async function init() {
      setSpinType(true);
      let url = `/users/${user_login}/block_user_lists.json`;
      axios
        .get(url, {
          params: {
            limit,
            page,
          },
        })
        .then((result) => {
          if (result) {
            setUsers(result.data.users);
            setSectinsSize(result.data.users_size);
          }
          setSpinType(false);
        })
        .catch((e) => {
          setSpinType(false);
          console.log(e);
        });
    }
    init();
  }, [page]);


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

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