import React , {useState} from 'react';
import { Button } 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';

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');

  return(
    <Box className="GroupSubLevel">
      <Short className="g-sub-left">
        <AlignCenterBetween>
          <span className="color-grey-3">Owndsknamename</span>
          <Leave>离开团队</Leave>
        </AlignCenterBetween>
        <div className="g-desc">该团队暂无描述</div>
        <div className="g-tip">
          <p>管理员团队对 <span>所有仓库</span> 具有操作权限，且对组织具有 <span>管理员权限</span>。 </p>
          <p>此外，该团队拥有了 <span>创建仓库</span>  的权限：成员可以在组织中创建新的仓库。 </p>
          <Button type="primary">团队设置</Button>
        </div>
      </Short>
      <Long>
        <Gap>
          <WhiteBack>
            <Tabs nav={['团队成员','团队项目']} index={nav} onChange={setNav}>
              {
                nav === "0" ?
                <Memberlist />:<Grouplist />
              }
            </Tabs>
          </WhiteBack>
        </Gap>
      </Long>
    </Box>
  )
})