import React, { useState, useEffect } from 'react';
import { random } from 'oak-domain/lib/utils/string';
import classNames from 'classnames';
import './index.less';
function WeChatLoginQrCode(props) {
    const { id = 'login_qr_container', appId, scope, redirectUri, state, style = '', href = "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30gCg==", dev = process.env.NODE_ENV === 'development', // 默认本地为true 发布时为false
    disabled = false, disableText, rootStyle, rootClassName, } = props;
    const [code, setCode] = useState('');
    useEffect(() => {
        if (appId) {
            if (disabled) {
                return;
            }
            // 由于本地不能微信扫码测试 所以只能模拟 输入code使用weChatLogin
            if (dev) {
                setCode(random(6));
                return;
            }
            loadScript(`${window.location.protocol}//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js`, () => {
                const params = {
                    id,
                    appid: appId,
                    scope,
                    redirect_uri: redirectUri,
                    style,
                    href,
                    state: state || ''
                };
                // @ts-ignore
                new WxLogin(params);
            });
        }
    }, [appId, disabled]);
    function loadScript(url, callback) {
        const script = document.createElement('script');
        // @ts-ignore
        if (script.readyState) {
            // IE
            // @ts-ignore
            script.onreadystatechange = function () {
                if (
                // @ts-ignore
                script.readyState === 'loaded' ||
                    // @ts-ignore
                    script.readyState === 'complete') {
                    // @ts-ignore
                    script.onreadystatechange = null;
                    callback();
                }
            };
        }
        else {
            // 其他浏览器
            script.onload = function () {
                callback();
            };
        }
        script.type = 'text/javascript';
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }
    const prefixCls = 'oak';
    const prefixCls2 = `${prefixCls}-loginQrCode`;
    let V;
    let DisableV;
    if (disabled) {
        DisableV = (<div className={classNames(prefixCls2, rootClassName)} style={rootStyle}>
                <div className={`${prefixCls2}_disable`}>
                    <div className={`${prefixCls2}_disable_border`}>
                        {disableText || '禁用微信二维码'}
                    </div>
                </div>
                <div className={`${prefixCls2}_disable_info`}>
                    <span>微信扫一扫</span>
                </div>
            </div>);
    }
    if (dev) {
        V = (<div className={`${prefixCls2}_dev`}>
                <div className={`${prefixCls2}_dev_header`}>
                    <input maxLength={6} value={code} className={`${prefixCls2}_dev_header_input`} onChange={(e) => {
                setCode(e.target.value);
            }}></input>
                    <button className={`${prefixCls2}_dev_header_btn`} onClick={() => {
                const url = new URL(decodeURIComponent(redirectUri));
                url.searchParams.set('code', code);
                if (state) {
                    url.searchParams.set('state', state);
                }
                window.location.href = url.toString();
            }}>
                        登录
                    </button>
                </div>
                <div className={`${prefixCls2}_dev_bottom`}>
                    <span className={`${prefixCls2}_dev_bottom_title`}>
                        模拟微信扫一扫
                    </span>
                    <span className={`${prefixCls2}_dev_bottom_desc`}>
                        1、由于本地开发环境限制，模拟微信扫码后动作
                    </span>
                    <span className={`${prefixCls2}_dev_bottom_desc`}>
                        2、CODE可修改
                    </span>
                </div>
            </div>);
    }
    if (!appId || !redirectUri) {
        let text = '缺少';
        if (!appId) {
            text += 'appId';
        }
        if (!redirectUri) {
            text += !appId ? '、' : '';
            text += 'redirectUri';
        }
        text += '参数';
        V = (<div className={`${prefixCls2}_err`}>
                <div className={`${prefixCls2}_err_text`}>{text}</div>
            </div>);
    }
    return (<>
            {DisableV}
            <div className={classNames(prefixCls2, rootClassName)} id={id} style={disabled ? { display: 'none' } : rootStyle}>
                {V}
            </div>
        </>);
}
export default WeChatLoginQrCode;