import React, { useState , useEffect } from 'react';
import { Button , List , Pagination , Skeleton } from 'antd';
import miyao from '../img/miyao_middle_icon.png';
import axios from 'axios';
import DeleteBox from './DeleteBox';
import SSHDetail from './SSHDetail';

const limit = 10;
function SSH(props) {
  const [ list ,setList ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ id , setId ] = useState(undefined);
  const [ visible , setVisible ] = useState(false);
  const [ visibleDesc , setVisibleDesc ] = useState(false);
  const [ content , setContent ] = useState(undefined);

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

  function Init() {
    const url = `/public_keys.json`;
    axios.get(url,{
      params:{
        page,limit
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.public_keys);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }

  function onSuccess() {
    if(id){
      const url = `/public_keys/${id}.json`;
      axios.delete(url).then(result=>{
        if(result && result.data){
          props.showNotification("密钥删除成功！");
          setVisible(false);
          if(page>1 && (list && list.length===1)){
            setPage(page-1);
          }else{
            Init();
          }
        }
      }).catch(error=>{})
    }
  }

  return(
    <div>
      <DeleteBox visible={visible} onCancel={()=>setVisible(false)} onSuccess={onSuccess}/>
      <SSHDetail visible={visibleDesc} onCancel={()=>setVisibleDesc(false)} desc={content}/>
      <div className="sshHead" style={{paddingBottom:'10px'}}>
        <span className="text-shadow07">SSH密钥</span>
        <button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')} className="but25">添加SSH密钥</button>
      </div>
      {
        list && list.length > 0 &&
        <List>
          {
            list.map((i,k)=>{
              return(
                <List.Item key={i.id}> 
                  <img src={miyao} alt=""/>
                  <div>
                    <p className="color-grey-3"><a className="task-hide" style={{display:"block",fontWeight:"500"}} onClick={()=>{setContent(i);setVisibleDesc(true)}}>{i.name}</a></p>
                    <p className="task-hide color-grey-6">{i.fingerprint}</p>
                    <span className="color-grey-6">添加时间：{i.created_time}</span>
                  </div>
                  <Button type="danger" onClick={()=>{setId(i.id);setVisible(true)}}>删除</Button>
                </List.Item>
              )
            })
          }
          
        </List>
      }
      {
        !list && <Skeleton />
      }
      {
        total > limit &&
        <div className="edu-txt-center mt15">
          <Pagination simple current={page} onChange={(p)=>{setPage(p)}} pageSize={limit} total={total}/>
        </div>
      }
      { (!list || (list && list.length === 0)) && <p className="mt30 pl20">您还没有添加任何SSH密钥</p> }
      <p className="questionLink"><a href={`https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent`} target="_blank">如何生成SSH密钥？</a></p>
    </div>
  )
}
export default SSH;