import React, { useContext, useEffect, useRef, useState } from "react"
import { useNavigate } from 'react-router-dom';
import { DispatchApp } from "../../App";
import { scrollToTab } from "../../utils";

export type NavListProps = {
    label: string,
    value: string,
    children: {
        label: string,
        value: string,
    }[]
}

interface Props {
    title: string,
    navList: NavListProps[]
    children?: React.ReactNode;
    onChange?: (nav: string, fatherNav: NavListProps) => void
}
/**
 * 公共头
 * @returns 
 */
const OtherHeader: React.FC<Props> = ({ title, navList, children, onChange }) => {

    /*************************************/
    const { scrollDirection, scrollY } = useContext(DispatchApp)!;
    const navigate = useNavigate();
    const [fatherNav, setFatherNav] = useState<NavListProps>(navList?.[0] || {})
    const [nav, setNav] = useState<string>(navList?.[0]?.children?.[0]?.value)
    const [affixed, setAffixed] = useState<boolean>(false)
    /*************************************/

    useEffect(() => {
        const firstData = navList?.[0]
        const nav = firstData?.children?.[0]?.value
        setFatherNav(firstData || {})
        setNav(nav)
        onChange?.(nav, firstData)
    }, [navList])

    const handleGoBack = () => {
        navigate(-1);
    };

    const ref1 = useRef(null);

    useEffect(() => {
        const handleScroll = () => {
            if (ref1.current) {
                const offsetTop = (ref1.current as any).offsetTop;
                const scrollTop = window.scrollY;
                setAffixed(scrollTop > offsetTop);
            }
        };

        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    const topHeight =  document.querySelector('.bg-top')?.clientHeight

    return <>
        <div className="bg-box" style={{ height: '100%' }}>
            <div className="bg bg-top"></div>
            <div className="bg bg-btm"></div>
        </div>
        <div className="mainbody">
            <div className="age-tip"></div>

            <div className="news-nav" style={{ height: '1.62rem' }}>
                <div
                    ref={ref1}
                    className={`sticky ${affixed ? 'fixed' : ''}`}
                    style={(affixed && scrollDirection === 'up') ? { top: (document.getElementById('bodyHeader')?.clientHeight || 0) + 10 } : {}}
                >
                    <div className="location-box">
                        <a className="goback" onClick={handleGoBack}></a>
                        <div className="location">当前位置：{title}</div>
                    </div>
                    <div className="news-nav-con">
                        {/* <h2 style={{ textAlign: 'center', marginBottom: '0.4rem' }}>{title}</h2> */}
                        <div className="news-nav-con-strategy">
                            <div className="left" />
                            <div className="strategy-nav">
                                <ul>
                                    {navList.map(item => <li
                                        key={item.value}
                                        className={fatherNav?.value === item.value ? 'active' : ''}
                                        onClick={(e) => {
                                            const nav = item?.children?.[0]?.value
                                            setFatherNav(item)
                                            setNav(nav)
                                            onChange?.(nav, item)
                                            scrollToTab(e)
                                            document.getElementById('sonNav')?.scrollTo({ left: 0 });
                                            const scY = topHeight ? topHeight / 1.5 : 200;
                                            scrollY > scY && window.scrollTo({ top: scY }); // 跳转到顶部
                                        }}
                                    >{item.label}</li>)}
                                </ul>
                            </div>
                            <div className="right" />
                        </div>
                    </div>
                    <div className="news-nav-con sub-news-nav-con">
                        <div className="news-nav-con-strategy">
                            <div className="left" />
                            <div className="strategy-nav" id="sonNav">
                                <ul>
                                    {fatherNav?.children?.map(item => <li
                                        key={item.value}
                                        className={nav === item.value ? 'active' : ''}
                                        onClick={(e) => {
                                            setNav(item.value)
                                            onChange?.(item.value, fatherNav)
                                            scrollToTab(e)
                                            const scY = topHeight ? topHeight / 1.5 : 200;
                                            scrollY > scY && window.scrollTo({ top: scY }); // 跳转到顶部
                                        }}
                                    >{item.label}</li>)}
                                </ul>
                            </div>
                            <div className="right" />
                        </div>
                    </div>
                </div>
            </div>
            {children}
        </div>
    </>
}

export default React.memo(OtherHeader)