import React , { useState , useEffect } from 'react';
import { Spin } from 'antd';
import { Blueback } from '../Component/layout';
import List from './Dispose/List';
import Head from './Dispose/head';
import axios from 'axios';
import PipelineName from './Dispose/PipelineName';

import styled from 'styled-components';

const Div = styled.div`{
  padding:24px 30px;
}`;

function Dispose(props){
  const [ spining , setSpining ] =  useState(true);
  const [ updateInfo , setUpdateInfo ] = useState(undefined);
  const [ list , setList ] = useState(undefined);
  const [ permission , setPermission ] = useState(undefined);
  const [ visible , setVisible ] = useState(false);


  const projectDetail = props.projectDetail;
  const current_user = props.current_user;
  let projectsId = props.match.params.projectsId; 
  let owner = props.match.params.owner; 

  // 获取用户的身份角色
  useEffect(()=>{
    if(projectDetail){
      setPermission(props.projectDetail.permission);
    }
  },[projectDetail])

  function Init(){
    const url = `/ci/pipelines/list.json`;
    axios.get(url,{
      params:{
        identifier:projectsId
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.pipelines);
        setSpining(false);
      }
    }).catch(error=>{})
  }

  useEffect(()=>{
    Init();
  },[])


  // 新增流水线
  function addNew(pipeline_name,id){
    setVisible(true);
    setUpdateInfo(undefined);
    if(pipeline_name){
      let l = {pipeline_name,id}
      setUpdateInfo(l);
    }
  }

  function onOk(pipeline_name,updateId){
    if(pipeline_name){
      if(!updateId){
        // 新增
        const url = `/ci/pipelines.json`;
        axios.post(url,{
          pipeline_name,
          file_name:".trustie-pipeline.yml",
          identifier:projectsId
        }).then(result=>{
          setVisible(false);
          if(result && result.data){
            props.showNotification("流水线新增成功，请进行工作流配置！");
            props.history.push(`/projects/${owner}/${projectsId}/devops/dispose/${result.data.id}`);
          }else{
            props.showNotification("流水线新增失败，请稍后再试！");
          }
        }).catch(error=>{})
      }else{
        // 修改
        const url = `/ci/pipelines/${updateId}.json`;
        axios.put(url,{
          pipeline_name
        }).then(result=>{
          if(result && result.data){
            setVisible(false);
            Init();
            props.showNotification("流水线名称更新成功！");
          }else{
            props.showNotification("流水线名称更新失败，请稍后再试！");
          }
        }).catch(error=>{})
      }
    }else{
      props.showNotification("请输入流水线名称！");
    }
  }

  // 删除
  function deleteFunc(id){
    const url = `/ci/pipelines/${id}.json`;
    axios.delete(url).then(result=>{
      if(result && result.data){
        props.showNotification("流水线删除成功！");
        Init();
      }
    }).catch(error=>{})
  }

  const operate = current_user && (permission && permission !== "Reporter");
  
  return(
    <Spin spinning={spining}>
      <PipelineName visible={visible} value={updateInfo} onCancel={()=>{setVisible(false);}} onOk={onOk}/>
      <div className="disposePanel">
        <Head />
        <Div>
          { operate && (!list ||(list && list.length === 0)) && <Blueback onClick={()=>addNew(undefined,undefined)}>新增流水线</Blueback> }
          <div className="mt20 disposeList">
            <List list={list} operate={operate} projectsId={projectsId} owner={owner} showModal={addNew} deleteFunc={deleteFunc}/>
          </div>
        </Div>
      </div>
    </Spin>
  )
}
export default Dispose;