import React, { useState, useEffect } from 'react';
import { Button, Spin, Popconfirm, Empty } from 'antd';
import styled from 'styled-components';
import { Box, Short, Long, Gap, WhiteBack, AlignCenterBetween } from '../../Component/layout';
import Tabs from '../../Component/Tabs';

import Memberlist from './GroupDetailMember';
import Grouplist from './GroupDetailProject';
import axios from 'axios';
const Leave = styled.a`{
  display:block;
  border-radius:5px;
  border:1px solid rgba(40,189,108,1);
  color:rgba(40,189,108,1);  
  padding:0px 14px;
  height:30px;
  line-height:30px;
}`
export default ((props) => {
  const [nav, setNav] = useState('0');
  const [isSpin, setIsSpin] = useState(false);
  const [userSpin, setUserSpin] = useState(false);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(15);
  const [total, setTotal] = useState(0);
  const [group, setGroup] = useState(undefined);
  const { OIdentifier, groupId } = props.match.params;
  const { current_user } = props;

  useEffect(() => {
    setIsSpin(true)
    const url = `/organizations/${OIdentifier}/teams/${groupId}.json`;
    axios.get(url)
      .then((result) => {
        if (result && result.data) {
          setGroup(result.data)
        }
      }).catch((error) => { });
    setIsSpin(false)
  }, [])

  // 移除成员
  function removeUser(username) {
    setIsSpin(true)
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_users/${username}.json`;
    if (username) {
      axios.delete(url)
        .then((result) => {
          if (result && result.data) {
            setPage(1)
            setQuery(undefined)
            setIdentify(undefined)
            this.getMember();
          }
        })
        .catch((error) => { });
    }
    setIsSpin(false)
  }

  return (
    <Box className="GroupSubLevel">
      <Short className="g-sub-left">
        <Spin spinning={isSpin}>
          {
            group ?
              <div>
                <AlignCenterBetween>
                  <span className="color-grey-3">{group.name}</span>
                  {group.is_member ?
                    <Popconfirm
                      title="确认离开团队吗？"
                      onConfirm={() => removeUser(current_user.login)}
                      okText="确认"
                      cancelText="取消"
                    >
                      <Leave>离开团队</Leave>
                    </Popconfirm>
                    : ""
                  }
                </AlignCenterBetween>
                <div className="g-desc">{group.description ? group.description : "暂无描述"}</div>
                <div className="g-tip">
                  <p>管理员团队对 <span>所有仓库</span> 具有操作权限，且对组织具有 <span>管理员权限</span>。 </p>
                  <p>此外，该团队拥有了 <span>创建仓库</span>  的权限：成员可以在组织中创建新的仓库。 </p>
                  {group.is_admin ? <Button type="primary" href={`/organize/${OIdentifier}/group/${groupId}/setting`}><span className="color-white">团队设置</span></Button> : ""}
                </div>
              </div>
              :
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          }
        </Spin>
      </Short>
      <Long>
        <Gap>
          <WhiteBack>
            <Tabs nav={['团队成员', '团队项目']} index={nav} onChange={setNav}>
              {
                nav === "0" ?
                  <Memberlist {...props} /> : <Grouplist {...props}/>
              }
            </Tabs>
          </WhiteBack>
        </Gap>
      </Long>
    </Box>
  )
})