import React from 'react';
import Styles from './styles.module.less';
const Oauth = (props) => {
    const { loading, hasError, errorMessage } = props.data;
    const { t, retry, returnToIndex } = props.methods;
    const tErrMsg = t(errorMessage);
    return (<div className={Styles.oauthContainer}>
            <div className={Styles.oauthCard}>
                {loading ? (<>
                        <div className={Styles.iconWrapper}>
                            <svg className={Styles.loadingIcon} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeOpacity="0.2"/>
                                <path d="M12 2C6.477 2 2 6.477 2 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                            </svg>
                        </div>
                        <h2 className={Styles.title}>{t('oauth.loading.title')}</h2>
                        <p className={Styles.description}>
                            {t('oauth.loadingMessage')}
                        </p>
                    </>) : hasError ? (<>
                        <div className={Styles.iconWrapper}>
                            <svg className={Styles.errorIcon} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
                                <path d="M15 9L9 15M9 9L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                            </svg>
                        </div>
                        <h2 className={Styles.title}>{t('oauth.error.title')}</h2>
                        <p className={Styles.errorMessage}>{tErrMsg}</p>
                        <button className={`${Styles.button} ${Styles.errorButton}`} onClick={() => retry()}>
                            {t('oauth.close')}
                        </button>
                    </>) : (<>
                        <div className={Styles.iconWrapper}>
                            <svg className={Styles.successIcon} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
                                <path d="M8 12L11 15L16 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                            </svg>
                        </div>
                        <h2 className={Styles.title}>{t('oauth.success.title')}</h2>
                        <p className={Styles.successMessage}>{t('oauth.successMessage')}</p>
                        <button className={`${Styles.button} ${Styles.successButton}`} onClick={() => returnToIndex()}>
                            {t('oauth.return')}
                        </button>
                    </>)}
            </div>
        </div>);
};
export default Oauth;