import React , { useState } from 'react';
import SelectBranch from '../Branch/Select';
import Title from '../Component/Title';
import styled from 'styled-components';
import { Blueline , FlexAJ , NumUl , GreenUnder , AlignCenter , WhiteBack } from '../Component/layout';

const Div = styled.div`{
  padding:20px 30px;
  min-height:500px;
}`

export default ((props)=>{
  const [ branch , setBranch ] = useState("master");
  const { projectsId , owner } = props.match.params;
  const projectDetail = props.projectDetail;

  function resetSetting(){

  }
  return(
    <WhiteBack>
      <Title>分支设置</Title>
      <Div>
        <div className="pb20" style={{borderBottom:"1px solid #eee"}}>
          <p className="color-grey-3 mb10">默认分支</p>
          <p className="mb10">默认分支被视作为代码库中的基本分支，是所有克隆、代码提交、合并请求的目标分支</p>
          <AlignCenter>
            <SelectBranch 
            branch={branch}
            repo_id={ projectDetail && projectDetail.repo_id}
            projectsId={projectsId} 
            changeBranch={setBranch}
            owner={owner}
            />
            <a className="color-blue ml20" onClick={resetSetting()}>设为默认分支</a>
          </AlignCenter>
        </div>
        <div>
          <FlexAJ className="pt20">
            <span className="color-grey-3">保护分支规则</span>
            <Blueline>+&nbsp;新建规则</Blueline>
          </FlexAJ>
          <NumUl>
            <li>限制分支的推送、合并。强制推送相关请去<GreenUnder>仓库设置</GreenUnder>。</li>
            <li>一个分支同时只能有一个保护分支规则生效，越早创建的规则优先级越高。</li>
            <li>保护分支规则只影响状态是【保护分支】的分支。【常规分支】和【只读分支】都不影响。</li>
          </NumUl>
        </div>
      </Div>
    </WhiteBack>
  )
})