web2468/src/layout/Navbar/index.jsx

import styles from './styles.module.scss';
// components

import SidebarTrigger from '@ui/SidebarTrigger';
import Headroom from 'react-headroom';
import Logo from '@components/Logo';
import AppBar from "@mui/material/AppBar";
import {useSidebar} from "@contexts/sidebarContext";
import {useThemeProvider} from "@contexts/themeContext";
import {useEffect, useRef, useState} from 'react';
import styled from 'styled-components/macro';
import {Tab, Tabs} from "@mui/material";
// import LINKS from "@constants/links";
import Button from "@mui/material/Button";
import {NavLink, useLocation, useNavigate} from "react-router-dom";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import ToggleButton from "@mui/material/ToggleButton";
import symbol from "@assets/symbol-defs.svg";
import symbol_m from "@assets/symbol-mobile.svg";
import {string} from "prop-types";
import IconButton from "@mui/material/IconButton";
import {animated,easings} from "@react-spring/web";
import {useSpring} from "@react-spring/core";
import {useWindowSize} from "react-use";
import ResizeObserver from "resize-observer-polyfill";
import {useSelector} from "react-redux";
import {
    allTopNavs,
    getRoute,
    getRouteChain,
    getShowInstall,
    getUserInfo,
    isLogin,
    isLogined
} from "@features/mainSlice";
import {getMailNew} from "@features/mailSlice";
import LazyImage from "@components/LazyImage";
import {numFormatter, sleep} from "@utils/helpers";
import {getAvatarUrl} from "@utils/avatar";
import {ROUTE_PATH} from "@constants/routes";
import {toast} from "react-toastify";
import LazyImgix from "@components/Imgix/LazyImgix";
const i18n=global.i18n;

const StyledToggleGroup= styled(ToggleButtonGroup)`
  border-radius: 0px !important;
  gap: 12px;
  // provider 数量较多时不要换行 / 不要把右侧 SignIn 区挤掉，
  // 给一个横向滚动兜底（一般场景宽度够用就不会出现滚动条）。
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
  &::-webkit-scrollbar { height: 4px; }
`;
const StyledToggle=styled(ToggleButton)`
    gap: 12px;
    text-transform:none !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    padding: 0px !important;
    flex: 0 0 auto;
    white-space: nowrap;
    &:hover, &:focus ,&.Mui-selected, &.active {
      background-color: var(--nav-item-hover) !important;
      a {
        color: var(--header);
        font-weight: 600;
        .icon {
           fill:${props => props.fill};
        }
      }
    }
    a {
        display: flex;
        align-items: center;
        color: var(--text);
        padding: 12px !important;
        transition: all var(--transition);
        font-family: var(--heading-font);
        gap: 8px;
        .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            fill: var(--text);
        }
    }
`;


const DesktopNavToggle=()=>{
    const LINKS=useSelector(allTopNavs);
    // 之前固定 slice(0,4) 让顶部导航最多只显示 4 项（Home/Hot Games/PGSoft/PragmaticPlay），
    // 后面的 provider 全部被截掉。导航栏右侧本身还有大量空白，直接展示全部即可。
    const links=LINKS;
    const {pathname} = useLocation();
    const [alignment, setAlignment] = useState(pathname);
    const currRoute=useSelector(getRoute(pathname));
    const getRootRoute=(pathname)=>{
        let route="";
        if (currRoute){
            let clv=currRoute.lv;
            if (clv==null)return route;
            for (let i = 0; i < LINKS.length; i++) {
                let link=LINKS[i];
                let lv=link.lv;
                if (clv.startsWith(lv)){
                    route=link.path;
                    break;
                }
            }
        }
        return route;
    }
    useEffect(() => {
        setAlignment(getRootRoute(pathname));
    }, [pathname]);
    const handleChange = (event, newAlignment) => {
        // setAlignment(newAlignment);
    };
    return (
        <StyledToggleGroup
            value={alignment}
            exclusive
            onChange={handleChange}
        >
            {
                links.map((link, index) => (
                    <StyledToggle value={link.path} fill={link.fill.split(";").pop()} key={link.title}>
                        <NavLink className="h4" to={link.path}>
                            <svg className={"icon"}>
                                <use xlinkHref={`${symbol}#${link.icon}`} />
                            </svg>
                            {i18n.t(link.title)}
                        </NavLink>
                    </StyledToggle>
                ))
            }
        </StyledToggleGroup>
    )
}


const DesktopSignInUp=()=>{
    const navigate=useNavigate();
    const isLogin=useSelector(isLogined);
    const {setIsShowLang} = useThemeProvider();
    return (
        <div className="d-flex align-items-center justify-content-end">
            {/*<IconButton aria-label="search">*/}
            {/*    <svg className={"ls-icon"} style={{width:'20px',height:'20px'}}>*/}
            {/*        <use xlinkHref={`${symbol}#icon_Search`} />*/}
            {/*    </svg>*/}
            {/*</IconButton>*/}
            {
                !isLogin?(
                    <>
                        <Button  className={`m-button ${styles.btn_sign_in}`} onClick={()=>{
                            navigate(ROUTE_PATH.SIGN_IN);
                        }}>{i18n.t('sign_in')}</Button>
                        <Button className={`${styles.btn_sign_up}`} onClick={()=>{
                            navigate(ROUTE_PATH.SIGN_UP);
                        }}>{i18n.t('sign_up')}</Button>
                    </>
                ):(
                    <>
                    </>
                )
            }
            {/*<Button  className="m-button">*/}
            {/*    <svg className={"ls-icon"} style={{width:'20px',height:'20px'}}>*/}
            {/*        <use xlinkHref={`${symbol}#icon_Chat`} />*/}
            {/*    </svg>*/}
            {/*    <div className="chat-green-dont"></div>*/}
            {/*</Button>*/}
            <Button  className="m-button" style={{marginLeft: '0.5rem',marginRight:'0.5rem'}} onClick={()=>{
                setIsShowLang(true);
            }}>
                <svg className={"ls-icon"} style={{width:'20px',height:'20px'}}>
                    <use xlinkHref={`${symbol}#icon_Language`} />
                </svg>
            </Button>
            {
                isLogin?(<UserInfo />):(<></>)
            }
        </div>
    )
}

const DesktopNav = () => {
    const {open} = useSidebar();
    const navstyle=open?styles.nav_open:"";
    return (
        <div
            className={`d-flex align-items-center justify-content-between ${styles.header} ${navstyle}`}>
            <DesktopNavToggle />
            <DesktopSignInUp/>
        </div>
    );
}
const MobileSignInUp=()=>{
    const navigate=useNavigate();
    const isLogin=useSelector(isLogined);
    return (
        <div className="d-flex align-items-center justify-content-end">
            {
                !isLogin?(
                    <>
                        <Button  className={`m-button ${styles.btn_sign_in} ${styles.btn_sign_in_mobile}`} onClick={()=>{
                            navigate(ROUTE_PATH.SIGN_IN);
                        }}>{i18n.t('sign_in')}</Button>
                        <Button  className={`${styles.btn_sign_up} ${styles.btn_sign_up_mobile}`} onClick={()=>{
                            navigate(ROUTE_PATH.SIGN_UP);
                        }}>{i18n.t('sign_up')}</Button>
                    </>
                ):(
                    <></>
                )
            }
            {/*<Button  className="m-button">*/}
            {/*    <svg className={"ls-icon"} style={{width:'1.4rem',height:'1.4rem'}}>*/}
            {/*        <use xlinkHref={`${symbol}#icon_Language`} />*/}
            {/*    </svg>*/}
            {/*</Button>*/}
        </div>
    );
}
const MobileNav=()=>{
    return (
        <div
            className={`d-flex align-items-center justify-content-between ${styles.header} ${styles.header_mobile}`}>
            <div className={`d-flex flex-row flex-1`} style={{maxWidth:"55%"}}>
                <SidebarTrigger/>
                <Logo size="sm"/>
            </div>
            <MobileSignInUp/>
            <UserInfo />
        </div>
    )
}
const UserInfo=()=>{
    const isLogin=useSelector(isLogined);
    const user=useSelector(getUserInfo);
    const mailNew=useSelector(getMailNew);
    const navigate=useNavigate();
    const stop=(e)=>{e.stopPropagation();};
    return (
        <>
            {
                isLogin?(
                    <div className={`d-flex align-items-center ${styles.user_info}`} onClick={()=>{
                        navigate(ROUTE_PATH.SETTINGS);
                    }}>
                        <div className={styles.info}>
                            <div className={styles.score}>{global.DOLLAR+" "+numFormatter(user.Score)}</div>
                        </div>
                        <NavLink to={ROUTE_PATH.PAY} className={styles.deposit_btn} onClick={stop}>
                            <svg className={styles.deposit_icon}>
                                <use xlinkHref={`${symbol}#icon_plus`}/>
                            </svg>
                        </NavLink>
                        <NavLink to={ROUTE_PATH.MESSAGE} className={styles.mail_btn} onClick={stop}>
                            <svg className={styles.mail_icon}>
                                <use xlinkHref={`${symbol}#icon_Mail`}/>
                            </svg>
                            {mailNew>0&&(<span className={styles.mail_badge}>{mailNew>99?'99+':mailNew}</span>)}
                        </NavLink>
                        <LazyImgix className={styles.avatar} src={getAvatarUrl(user.FaceID)} alt={"Head"} width={80}/>
                    </div>
                ):(<></>)
            }
        </>
    )
}
const PageHeader = () => {
    const LINKS=useSelector(allTopNavs);
    const {initHeaderHeight,installOpen} = useThemeProvider();
    const {pathname} = useLocation();
    const navigate=useNavigate();
    const barRef = useRef(null);
    const currRoute=useSelector(getRoute(pathname));
    const chain=useSelector(getRouteChain(pathname));
    const {isMobile,showHeader,setShowHeader,showMHeader, setShowMHeader} = useThemeProvider();
    // const [showMHeader, setShowMHeader] = useState(false);
    const isLogin=useSelector(isLogined);
    let lastscroll=0;
    const {open} = useSidebar();
    const navstyle=open?styles.nav_open:"";
    const isShowInstall=useSelector(getShowInstall);

    const checkNavActive=(lv)=>{
        if (currRoute&&currRoute.lv)return currRoute.lv.startsWith(lv);
        else return false;
    }
    const getHeaderHeight = () => {
        // console.log(document.querySelector('div.progressier-install-banner'))
        const header = document.querySelector('#appbar');
        let offset = 0;
        if (barRef){
           const headerRoom=document.querySelector('#headerRoom');
           if (headerRoom){
              if (!barRef.showHeader){
                  offset=headerRoom.clientHeight;
                  const hstyle = window.getComputedStyle(headerRoom);
                  if (hstyle!=null){
                      let paddingBottom=hstyle.paddingBottom;
                      paddingBottom=Number(paddingBottom.replace("px",""));
                      offset=offset-paddingBottom;
                  }
              }
           }
        }
        if (header!=null)return `${(header.offsetHeight-offset) || 0}px`
        else return '0px';
    }
    const handleScroll=()=>{
        if (!barRef.showHeader)return;
        let scrollTop = document.documentElement.scrollTop; //滚动条滚动高度
        let dt=scrollTop-lastscroll;
        lastscroll=scrollTop;
        let show=false;
        if (dt>20){
            show=false;
            setShowMHeader(show);
        }
        else if (dt<-20){
            show=true;
            setShowMHeader(show);
        }
        if (scrollTop<20){
            setShowMHeader(true);
        }
    }
    const changeHeaderHeight=()=>{
        document.documentElement.style.setProperty('--header-active', getHeaderHeight());
        initHeaderHeight(getHeaderHeight());
    }
    const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
            // 获取目标元素的高度
            const { height } = entry.contentRect;
            // 可在这里处理高度变化的逻辑
            changeHeaderHeight();
        }
    });
    const getProgressierInstallBanner=(params,callback)=>{
        let banner=new window.NewProgressierInstallBanner(
            params,
            callback
        )
        banner.remove = async ()=>{
            if (banner.deny && !banner.data.preview) {
                banner.deny()
            }
            banner.element.classList.remove("in");
            // await progressier.utils.wait(1e3);
            banner.element.remove()
        }
        banner.make=()=>{
            document.querySelectorAll("." + banner.className).forEach(function(e) {
                e.remove()
            });
            let installBanner=document.querySelector("#installBanner");
            if (installBanner){
                banner.element = window.progressier.utils.node("div", banner.className, {
                    parent: installBanner
                });
                banner.element.classList.add(styles.install_banner);
            }
        }
        banner.init = async function() {
            window.progressier.utils.styling(banner.styling, banner.className);
            let installBanner=document.querySelector("#installBanner");
            if (installBanner==null){return}
            banner.make();
            banner.render()
        }
        window.install_banner=banner;
        return banner;
    }
    // const reProgressierInstallBanner=()=>{
    //     if (window.NewProgressierInstallBanner!=null)return;
    //     let ProgressierInstallBanner=window.ProgressierInstallBanner;
    //     window.NewProgressierInstallBanner=ProgressierInstallBanner;
    //     window.ProgressierInstallBanner=function (e, t) {
    //         this.remove = async function() {
    //
    //         };
    //         this.render = async function() {
    //
    //         };
    //         this.make = function() {
    //
    //         };
    //         this.init = async function() {
    //
    //         }
    //     }
    // }
    const checkInstall=(l)=>{
        //route控制
        if (!isShowInstall){
            return false;
        }
        if (!installOpen){
            return false;
        }
        if (l.parent.detection.isStandalone()) {
            return false;
        }
        return true;
    }
    const startListening=async ()=>{
        if (window.progressier==null)return ;
        let l=window.progressier.banners;
        await l.parent.data.waitForData();
        l.data = l.parent.data.params;
        if (!l.reinstallTimer) {
            l.reinstallTimer = setInterval(function() {
                // window.alert(window.progressier["native"].justInstalled)
                // if (!l.showInstall()) {
                //     return
                // }
                if (!checkInstall(l)){
                    clearInterval(l.reinstallTimer)
                    l.reinstallTimer=null;
                    return;
                }
                // window.alert("222")
                // if (l.showed) {
                //     clearInterval(l.reinstallTimer)
                //     l.reinstallTimer=null;
                //     return
                // }
                // window.alert("3333")
                l.showed = true;
                // new window.NewProgressierInstallBanner({
                //         icon: l.icon(),
                //         color: l.data.buttonColor,
                //         btnColor: l.data.buttonTextColor,
                //         text: l.data.installBannerPitch
                //     },function() {
                //         l.deny(l.installCookie)
                //     }
                // ).init();
                let InstallBanner=getProgressierInstallBanner(
                    {
                        icon: l.icon(),
                        color: l.data.buttonColor,
                        btnColor: l.data.buttonTextColor,
                        text: l.data.installBannerPitch
                    },()=>{
                        l.deny(l.installCookie)
                    }
                ).init();

                clearInterval(l.reinstallTimer)
            }, l.interval)
        }
        else
        {
            clearInterval(l.reinstallTimer)
            l.reinstallTimer=null;
        }
    }
    const checkProgressier=async ()=>{
        // return ;
        if (window.progressier){
            // reProgressierInstallBanner();
            // let l=window.progressier.banners;
            // await l.parent.data.waitForData();
            // await checkWaitForData();
            // let data=l.data;
            // if (data){
            //     if (window.NewProgressierInstallBanner){
            //         let InstallBanner=getProgressierInstallBanner(
            //             {
            //                 icon: l.icon(),
            //                 color: l.data.buttonColor,
            //                 btnColor: l.data.buttonTextColor,
            //                 text: l.data.installBannerPitch
            //             }
            //         ).init();
            //     }
            // }
            startListening();
        }
    }
    const stopListener=()=>{
        if (window.progressier==null)return;
        let l=window.progressier.banners;
        if(l){
            if (l.reinstallTimer!=null){
                clearInterval(l.reinstallTimer);
                l.reinstallTimer=null;
            }
        }
    }
    const checkInstallOpen=()=>{
        if (installOpen&&isShowInstall){
            checkProgressier();
        }
        else
        {
            if (window.install_banner){
                window.install_banner.remove();
            }
        }
    }
    useEffect(() => {
        // 这里的代码会在组件挂载时执行
        // console.log('Component mounted');
        window.addEventListener('scroll', handleScroll);
        if (barRef.current) {
            resizeObserver.observe(barRef.current);
        }
        // testBefore();
        // checkProgressier();
        return () => {
            // 可选的清除函数，当组件卸载时执行
            // console.log('Component unmounted');
            window.removeEventListener('scroll', handleScroll);
            if (barRef.current) {
                resizeObserver.unobserve(barRef.current);
            }
            // stopListener();
        };
    }, []);
    // }, [pathname]);
    useEffect(()=>{
        setShowMHeader(showHeader);
        barRef.showHeader=showHeader;
        changeHeaderHeight();
    },[showHeader]);

    useEffect(()=>{
        let len=chain.length;
        let isShowH=len<=1;
        if (LINKS===null||LINKS.length<=1){
            isShowH=false;
        }
        if (pathname.startsWith(ROUTE_PATH.SPORTS)){
            isShowH=true;
        }
        setShowHeader(isShowH);
    },[pathname]);
    useEffect(()=>{
        checkInstallOpen();
        return ()=>{
            stopListener();
        }
    },[installOpen,isShowInstall])
    const headerAni=useSpring({
        from: {transform: 'translateY(-100%) translateZ(0px)'},
        transform:showMHeader?'translateY(0%) translateZ(0px)':'translateY(-100%) translateZ(0px)',
        config: {
            easing: easings.easeOutBack,
            duration:300
        },
    });
    const changePath=(path)=>{
        navigate(path);
    }
    const renderHeaderRoom=()=>{
        const active=styles.active;
        return (
            <animated.div id={'headerRoom'} className={`${styles.header_room}`} style={headerAni}>
                <div className={`${styles['mobile-top-navigate-list']}`}>
                    <button className={`${styles['mb-top-navigate-item']}  ${pathname==='/'?active:''}`} onClick={()=>{
                        changePath('/');
                    }}>
                        <svg className={"icon"}>
                            <use xlinkHref={`${symbol_m}#icon_Home`} />
                        </svg>
                        <span>{i18n.t("links.home")}</span>
                    </button>
                    {
                        LINKS.map((link, index) => (
                            <button key={index} className={`${styles['mb-top-navigate-item']} ${checkNavActive(link.lv)?active:''}`} onClick={()=>{
                                changePath(link.path);
                            }}>
                                <svg className={"icon"}>
                                    <use xlinkHref={`${symbol_m}#${link.icon}`} />
                                </svg>
                                <span>{i18n.t(link.title)}</span>
                            </button>
                        ))
                    }
                </div>
            </animated.div>
        );
    }
    const renderMobileInstall=()=>{
        return (
            <div id={'installBanner'} className={styles.header_install}></div>
        )
    }
    const renderMobile=()=>{
        return (
            <>
                {/* {renderMobileInstall()} */}
                <MobileNav />
                {/* {renderHeaderRoom()} */}
            </>
        )
    }
    const renderDesktopInstall=()=>{
        return (
            <div id={'installBanner'} className={`${styles.header_install} ${styles.header_install_desk} ${navstyle}`}></div>
        )
    }
    const renderDesktop=()=>{
        return (
            <>
                {/*{renderDesktopInstall()}*/}
                <DesktopNav/>
            </>
        );
    }

    const isHome = pathname === "/" || pathname === "";
    if (isMobile() && !isHome) {
        return (<div id={'appbar'} ref={barRef} className={`${styles.appbar} ${styles.mobile} ${styles.hide_header}`}/>);
    }
    return (
        <div id={'appbar'} ref={barRef} className={`${styles.appbar} ${isMobile()?styles.mobile:''} ${isMobile()&&!showHeader?styles.hide_header:''}`}>
            {
                isMobile()?renderMobile():renderDesktop()
            }
        </div>
    )
}

export default PageHeader