import React, { useState, useEffect } from 'react';
import { Modal, Button, } from 'antd';
import { Base64 } from 'js-base64';
import './index.scss';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder'
import axios from 'axios';

const identify = {
    manager: "管理员",
    developer: "开发者",
    reporter: "报告者",
    owner: "所有者",
}
function Invite({ history, current_user, match, projectDetail, showNotification }) {

    if (!current_user.login) {
        let { pathname, search } = window.location;
        window.location.href = `/login?go_page=${pathname}${search}`;
    }
    let permission = projectDetail && projectDetail.permission;
    const { projectsId, owner } = match.params;
    let inviteString = window.location.search && window.location.search.split('?invite=')[1];
    let data = inviteString && JSON.parse(Base64.decode(inviteString));
    const [detail, setDetail] = useState({});
    const [visible, setVisible] = useState(true);

    useEffect(() => {
        if (permission && detail.role && detail.role == permission.toLocaleLowerCase() || permission == 'Owner') {
            showNotification(`您已经是${identify[detail.role]}了`)
            setTimeout(() => {
                history.push(`/${owner}/${projectsId}`);
            }, 2000)
        } else {
            setVisible(true)
        }
    }, [permission, detail.role]);

    useEffect(() => {
        const url = `/${owner}/${projectsId}/project_invite_links/show_link.json?invite_sign=${data.sign}`;
        axios.get(url).then(res => {
            if (res && res.data) {
                setDetail(res.data);
            } else {
                showNotification('查询邀请链接失败');
            }
        })
    }, [])

    function accept() {
        const url = `/${owner}/${projectsId}/project_invite_links/redirect_link.json?invite_sign=${data.sign}`;
        axios.post(url).then(res => {
            if (res && res.data.message == 'success') {
                if (detail.is_apply) {
                    setVisible(false);
                    Modal.success({ content: '提交申请成功，请等待该仓库管理员审核' });
                } else {
                    history.push(`/${owner}/${projectsId}`);
                }
            }
        }).catch(error => { })

    }


    return (
        <div className="">
            {data && <Modal
                visible={visible}
                className="invite_development"
                title={<div className="ownerImage"><img src={detail.project && getImageUrl(detail.project.owner.image_url)} /></div>}
                width="548px"
                closable={true}
                onCancel={() => { setVisible(false); history.push(`/${current_user.login}`) }}
                centered
                okText={'接受'}
                cancelText={'拒绝'}
                onOk={accept}
                maskClosable={false}
            >
                <Link className="invite_project link" target="_blank" to={`/${data.ownerLogin}/${data.projectId}`}>{detail.project && detail.project.owner.name}/{detail.project && detail.project.name}</Link>
                <div className="invite_content">
                    <Link className="link" to={`/${detail.user && detail.user.login}`}>{detail.user && detail.user.name}</Link> 邀请您以{identify[detail.role]}的身份加入此代码库
                    是否接受邀请？
                </div>
            </Modal>}
        </div>
    )
}


export default Invite;