import styles from './styles.module.scss';
import Popup from "@components/Popup";
import {isAndroid, isInFBBrowser, isIOS, openUrlUseChrome, openUrlUseSafari} from "@utils/UAUtils";
import fb_android_bg from "@assets/fbguide/androidbg.webp";
import fb_android_logobg from "@assets/fbguide/logo_android.webp";
import app_logo from "@assets/logo/logo.png";
import fb_bubble from "@assets/fbguide/bubble.webp";
import fb_ios_bg from "@assets/fbguide/iosbg.webp";
import LazyImage from "@components/LazyImage";
import {useEffect, useState} from "react";
const i18n=global.i18n;
const WBrowserNotSupport = () => {
    const [isShow, setIsShow] = useState(false);
    useEffect(() => {
        setTimeout(()=>{
            setIsShow(true);

            // adjust 打开fb引导界面
            if (isAndroid()) global.tracker.trackEvent("enter_fb_guide_android");
            else if (isIOS()) global.tracker.trackEvent("enter_fb_guide_ios");
        },150)
    }, []);
    const handleClickFBAndroid=()=>{
        // adjust android点击fb引导界面按钮
        global.tracker.trackEvent("click_fb_guide_android");

        openUrlUseChrome();
    }
    const handleClickFBIOS=()=>{
        // adjust ios点击fb引导界面按钮
        global.tracker.trackEvent("click_fb_guide_ios");

        openUrlUseSafari();
    }
    const renderFBAndroid=()=>{
        return (
            <Popup onClose={handleClickFBAndroid} open={isShow} btnCloseType={0} popupClass={styles.fb_android_popup}>
                <div className={styles.container} onClick={handleClickFBAndroid}>
                    <LazyImage src={fb_android_bg} alt={""} className={styles.bg}></LazyImage>
                    <div className={styles.content}>
                        <img src={fb_android_logobg} alt={""} className={styles.logoBg}/>
                        <img src={app_logo} alt={""} className={styles.logo}/>
                        <div className={styles.bubbleContainer}>
                            <img src={fb_bubble} alt={""} className={styles.bubble}/>
                            <div className={styles.bubbleText}>{i18n.t("browserInvaild.tips")}</div>
                        </div>
                        <button className={styles.btn_open}>
                            {i18n.t("browserInvaild.btn_open")}
                        </button>
                    </div>
                </div>
            </Popup>
        )
    }
    const renderFBIOS=()=>{
        return (
            <Popup onClose={()=>{}} open={isShow} btnCloseType={0} popupClass={styles.fb_ios_popup}>
                <div className={styles.container} onClick={handleClickFBIOS}>
                    <img src={fb_ios_bg} alt={""} className={styles.bg}/>
                    <img src={app_logo} alt={""} className={styles.logo}/>
                    <button className={styles.btn_open}>
                        {i18n.t("browserInvaild.btn_open")}
                    </button>
                </div>
            </Popup>
        )
    }
    const renderView = () => {
        if (isInFBBrowser()) {
            if (isAndroid()) return renderFBAndroid();
            else if (isIOS())return renderFBIOS();
        }
        return (<></>)
    }
    return (
        <>
            {renderView()}
        </>
    )
}
export default WBrowserNotSupport;
