import * as React from 'react';
import { ReactComponent as CloseIcon } from '../images/close.svg';
import { PageStep, Platfrom, UserConfig } from '../common';
import { ReactComponent as AlibabaIcon } from '../images/alibaba.svg';
import { ReactComponent as KeyIcon } from '../images/key.svg';
import { FormattedMessage } from 'react-intl';

interface LoginProps {
    rpc: any;
    platform: Platfrom;
    authInfo?: UserConfig;
    setAuthInfo: (data: any) => void;
    setStep: (type: PageStep) => void;
}

export const CommonLoginStep = (props: LoginProps) => {
    const { rpc, platform, authInfo, setAuthInfo, setStep } = props;

    const triggerKeyLogin = async () => {
        const credential = await rpc.invoke('commonLogin', [platform]);
        if (credential) {
            setAuthInfo({
                ...authInfo,
                accountId: credential.uin,
                accessKeyId: credential.secretId,
                accessKeySecret: credential.secretKey,
            });
            setStep(PageStep.INFO);
        }
    };

    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' }}>
                    <AlibabaIcon />
                </div>
                <div style={{ fontSize: 14, marginLeft: 10 }}>
                    <FormattedMessage id='login.common.desc1' />
                    <FormattedMessage id={`home.platform.${platform}`} />
                    <FormattedMessage id='login.common.desc2' />
                </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>
        </>
    );
};
