import * as React from 'react';
import { useState, useMemo } from 'react';
import QRCode from 'qrcode.react';
import { ReactComponent as CloseIcon } from '../images/close.svg';
import { AuthInfo, LoginInfo, PageStep } from '../common';
import { ReactComponent as TencentIcon } from '../images/tencent.svg';
import { ReactComponent as ScanIcon } from '../images/scan.svg';
import { ReactComponent as KeyIcon } from '../images/key.svg';
import { FormattedMessage } from 'react-intl';

interface LoginProps {
    rpc: any;
    tencentAuthInfo?: AuthInfo;
    setStep: (type: PageStep) => void;
    setTencentAuthInfo: (userInfo: any) => void;
}

export const TencentLoginStep = (props: LoginProps) => {
    const { rpc, tencentAuthInfo, setStep, setTencentAuthInfo } = props;
    const [loginUrl, setLoginUrl] = useState<string>();

    const qrcodeLoginHandler = async (loginInfo: LoginInfo) => {
        setLoginUrl(loginInfo.shortUrl);
        const userInfo = await rpc.invoke('tencentLogin', ['web', loginInfo.loginStatusUrl]);
        if (userInfo) {
            setTencentAuthInfo({ ...tencentAuthInfo, user: userInfo });
            setStep(PageStep.INFO);
        }
    };

    const refreshLogin = async (loginInfo: LoginInfo) => {
        setTencentAuthInfo({ ...tencentAuthInfo, login: loginInfo });
        await qrcodeLoginHandler(loginInfo);
    };
    rpc.registerMethod({ func: refreshLogin, name: 'refreshLogin' });

    const triggerKeyLogin = async () => {
        const userInfo = await rpc.invoke('tencentLogin', ['key']);
        if (userInfo) {
            setTencentAuthInfo({ ...tencentAuthInfo, user: userInfo });
            setStep(PageStep.INFO);
        }
    };

    useMemo(async () => {
        if (tencentAuthInfo?.login) {
            await qrcodeLoginHandler(tencentAuthInfo.login);
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [tencentAuthInfo]);

    return (
        <>
            <div className='btn-close' onClick={() => setStep(PageStep.HOME)}>
                <CloseIcon className='vscode-icon' />
            </div>

            <div className='step-title'>
                <FormattedMessage id='login.common.title' />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', marginBottom: 30 }}>
                <div className='platform-icon' style={{ display: 'inline-block' }}>
                    <TencentIcon />
                </div>
                <div style={{ fontSize: 14, marginLeft: 10, fontWeight: 'bold' }}>
                    <FormattedMessage id='login.tencent.desc' />
                </div>
            </div>
            <div className='login-type'>
                <div className='login-title'>
                    <ScanIcon className='login-icon vscode-icon' />
                    <FormattedMessage id='login.tencent.scan' />
                </div>
                {loginUrl && (
                    <div className='qrcode-wrapper'>
						{/* @ts-ignore */}
                        <QRCode value={loginUrl} size={136} renderAs='svg' bgColor='#000000' fgColor='#ffffff' />
                    </div>
                )}
            </div>
            <div className='login-type' style={{ cursor: 'pointer' }} onClick={triggerKeyLogin}>
                <div className='login-title'>
                    <KeyIcon className='login-icon vscode-icon' />
                    <FormattedMessage id='login.common.key' />
                </div>
            </div>
        </>
    );
};
