import React, { useState } from 'react';
import { Dropdown, Menu, Tooltip } from 'antd';
import "./branch.scss";

function CloneAddress({http_url , ssh_url , zip_url , tar_url}) {
  const [ key , setKey ] = useState("HTTP");
  // 点击按钮复制功能
  function jsCopy(){
    var e = document.getElementById("copy_rep_content");
    e.select();
    document.execCommand("Copy");
  }

  return (
    <div className="downMenu">
      <div style={{padding:"10px 20px 20px 20px",borderBottom:"1px solid #eee"}}>
        <Menu className="urlMenu" selectedKeys={[key]} mode={"horizontal"}>
          <Menu.Item key="HTTP" onClick={(e)=>{setKey(e.key)}}>HTTP</Menu.Item>
          <Menu.Item key="SSH" onClick={(e)=>{setKey(e.key)}}>SSH</Menu.Item>
        </Menu>
        <div className="gitAddressClone">
          <input type="text" id="copy_rep_content" value={key==="HTTP" ? http_url:ssh_url} />
          <Tooltip title="复制链接">
            <span className="color-blue" onClick={jsCopy}><i className="iconfont icon-fuzhi"></i></span>
          </Tooltip>
        </div>
      </div>
      <Menu className="edu-txt-center">
        <Menu.Item><a href={zip_url}>下载 ZIP</a></Menu.Item>
        <Menu.Item><a href={tar_url}>下载 TAR.GZ</a></Menu.Item>
      </Menu>
    </div>
  )
}
export default CloneAddress;