import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Spin, Empty, Pagination } from 'antd';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder';
const Box = styled.div`{
  padding:0px 38px;
}`
const Div = styled.div`{
  display:flex;
  align-items: center;
  padding:25px 0px;
  border-bottom:1px solid #eee;
  &:last-child{
    border-bottom:none;
  }
}`
const Imgs = styled.img`{
  width:30px;
  height:30px;
  margin-right:12px;
  border-radius:50%;
}`

const faker_projects = [
  {
    id: 2,
    project: {
      owner_name: "ceshi_org_1",
      name: "jajaj0",
      identifier: "ssjsksjsk"
    }
  },
  {
    id: 3,
    project: {
      owner_name: "sylor_test",
      name: "sylor_test",
      identifier: "sylor_test"
    }
  }
]

export default ((props) => {
  const [isSpin, setIsSpin] = useState(false);
  const [projects, setProjects] = useState(undefined);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(15);
  const [total, setTotal] = useState(0);
  const { OIdentifier, groupId } = props.match.params;

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

  function get_project() {
    setIsSpin(true)
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_projects.json`;
    axios
      .get(url, {
        params: {
          page,
          limit
        },
      })
      .then((result) => {
        if (result && result.data && result.data.team_projects.length > 0) {
          setProjects(result.data.team_projects)
          setTotal(result.data.total_count)
        } else {
          setProjects(faker_projects)
        }
      }).catch((error) => { });
    setIsSpin(false)
  }


  return (
    <Box>
      <Spin spinning={isSpin}>
        {
          projects && projects.length > 0 ? projects.map((item, key) => {
            return (
              <Div>
                <Imgs src={item.project.image_url ? getImageUrl(`images/${item.project.image_url}`) : "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3025493530,1989042357&fm=26&gp=0.jpg"}/>
                <Link to={`/projects/${item.project.owner_name}/${item.project.name}`}>{item.project.name}</Link>
              </Div>
            )
          })
            :
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        }
      </Spin>

    </Box>
  )
})