import React, { useEffect, useState, useImperativeHandle, forwardRef } from 'react';
import { Select, Checkbox, Button, Input, Spin, Table, Tooltip, Pagination, Popconfirm } from "antd";
import axios from 'axios';
import { Base64 } from 'js-base64';
import NoneData from "../Nodata";
import { Link } from "react-router-dom";
import { getImageUrl } from "educoder";

const { Search } = Input;
const LIMIT = 15;
const optionList = [
  { value: "manager", name: "管理员 - 拥有仓库设置功能、代码库读、写操作权限" },
  { value: "developer", name: "开发人员 - 拥有代码库读、写操作权限" },
  { value: "reporter", name: "报告者 - 拥有代码库读操作权限" }
];
function CollaboratorMemberByLink({ projectsId, owner, project_id, author, showNotification, newId, flag }) {

  const [role, setRole] = useState('developer');
  const [is_apply, setIs_apply] = useState(true);
  const [inviteUrl, setinviteUrl] = useState('');
  const [copy, setCopy] = useState(false);

  useEffect(() => {
    const url = `/${owner}/${projectsId}/project_invite_links/current_link.json`;
    axios.get(url, {
      params: {
        role,
        is_apply
      }
    }).then(res => {
      if (res && res.data) {
        let params = {
          projectName: res.data.project.name,
          projectId: res.data.project.identifier,
          // role: res.data.role,
          ownerLogin: res.data.project.owner.login,
          ownerName: res.data.project.owner.name,
          // userName: res.data.user.name,
          // userLogin: res.data.user.login,
          sign:res.data.sign,
        };
        let urlParams = JSON.stringify(params);
        let content = Base64.encode(urlParams);

        setinviteUrl(`${window.location.origin}/${owner}/${projectsId}/invite?invite=${content}`);
        setCopy(false);
      }
    }).catch(error => { })
  }, [role, is_apply]);

  function inviteClick() {
    const copyEle = document.querySelector('#inviteUrl'); // 获取要复制的节点
    if (!copyEle) {
      console.error("您的CopyTool未设置正确的inputId");
      return;
    }
    copyEle.select(); // 执行选中元素
    if (document.execCommand('copy')) {
      document.execCommand('copy');
      setCopy(true);
      // copyEle.blur();
      document.getSelection().removeAllRanges();
    }
  }

  return (
    <div className='addMemByLinkBox'>
      <div className='font-16 mt20 mb10'>请选择邀请用户权限</div>
      <Select className='selectBox' defaultValue="developer" onChange={(v) => { setRole(v) }}>
        {optionList.map(item => {
          return <Select.Option value={item.value} key={item.value}>{item.name}</Select.Option>
        })}
      </Select>

      <Checkbox checked={is_apply} className='font-15 checkBox' onChange={e => { setIs_apply(e.target.checked) }}>需要管理员审核</Checkbox>

      <div className='font-16 mt25 mb10'>邀请链接</div>
      <Input
        id="inviteUrl"
        value={inviteUrl}
        readOnly
        addonAfter={<Button type='primary' className={`${copy?'success':''}`} onClick={inviteClick}>{copy ? '复制成功' : '复制链接'}</Button>} className='linkBox'
      />
      <div className='tipBox mt25'>
        {/* <div>注: </div> */}
        <div className='ml5'>
          1、管理员可通过分享邀请链接的方式，邀请其他成员加入项目<br />
          2、若已勾选管理员审核选项，用户接收邀请后管理员可在个人主页中“待办事项”窗口审核成员审核信息，若不需要管理员审核，成员接收邀请后，将直接加入项目<br />
          3、当前邀请链接有效期为三天
        </div>
      </div>
    </div>
  )
}
export default forwardRef(CollaboratorMemberByLink);