import React, { useState, useEffect } from 'react';
import Cards from '../../Component/MemberCards';
import { getImageUrl } from 'educoder';
import axios from 'axios';
import { Spin, Empty,Pagination } from 'antd';
export default ((props) => {
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(15);
  const [total, setTotal] = useState(0);
  const [data, setMembers] = useState(undefined);
  const [isSpin, setIsSpin] = useState(false);
  const { OIdentifier, groupId } = props.match.params;
  const { current_user } = props;

  useEffect(() => {
    getMember()
  }, [page])

  function getMember() {
    setIsSpin(true)
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_users.json`;
    axios
      .get(url, {
        params: {
          page,
          limit
        },
      })
      .then((result) => {
        if (result && result.data) {
          setMembers(result.data.team_users)
          setTotal(result.data.total_count)
        }
      }).catch((error) => { });
    setIsSpin(false)
  };

  return (
    <Spin spinning={isSpin}>
      <div className="MemberBoxThree">
        {
          data && data.length > 0 ? data.map((item, key) => {
            return (
              <Cards
                img={getImageUrl(`images/${item.user.image_url}`)}
                name={item.user.name}
                time={item.created_at}
                focusStatus={item.user.watched}
                is_current_user={current_user && item.user.login === current_user.login}
                login={item.user.login}
              />
            )
          })
            :
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        }
      </div>
      {
        total > limit ?
          <div className="edu-txt-center mt30 mb20">
            <Pagination simple defaultCurrent={page} total={total} pageSize={limit} onChange={ChangePage}></Pagination>
          </div>
          : ""
      }
    </Spin>

  )
})