import PropTypes from "prop-types";
import styles from "./styles.module.scss";
import SvgIcon from "@components/SvgIcon";
import { animated, easings } from "@react-spring/web";
import { useState, useEffect } from "react";
import { useSpring, useSpringRef } from "@react-spring/core";
import { sleep } from "@utils/helpers";
import { useThemeProvider } from "@contexts/themeContext";
import CSSTransition from "react-transition-group/CSSTransition";
import useEdgeGesture from "@hooks/useEdgeGesture";
import { toast } from "react-toastify";
import { useWithdrawMission } from "@contexts/withdrawMissionContext";
const i18n = global.i18n;

const SubScreen = ({ open, onClose, children, route, timeout = 500, level = 0, header, ...props }) => {
    // const [subOpen,setSubOpen]=useState(open);
    // console.log(header)
    const { getSidedGesture, setSidedGesture } = useEdgeGesture();
    const subOpen = open;
    const duration = timeout;
    let isSideGesture = getSidedGesture();
    const { setIsOpenSub } = useThemeProvider();
    // if (level === 0) setIsOpenSub(subOpen);
    // 修复：将状态更新移到 useEffect 中
    useEffect(() => {
        if (level === 0) {
            setIsOpenSub(subOpen);
        }
    }, [level, subOpen, setIsOpenSub]);

    // const duration=50;
    const { open: fwOpen, setOpen: setFwOpen } = useWithdrawMission();
    const delayClose = () => {
        // 添加条件
        if (window.location.hash === "#/FWRecord") {
            // console.error("delayClose hash", window.location.hash);
            global.ignorePopup = true;
            setTimeout(() => {
                setFwOpen(true);
            }, 250);
        }

        if (onClose) onClose();
    };
    const close = () => {
        delayClose();
    };
    // useEffect(()=>{
    //     return async () => {
    //     };
    // },[])

    // const showAni=useSpring({
    //     // ref: spref,
    //     from: {transform: 'translateX(100%) translateZ(0px)',transition:`transform ${timeout}ms cubic-bezier(0, 0, 0.2, 1) 0ms`},
    //     transform:subOpen?'translateX(0%) translateZ(0px)':'translateX(100%) translateZ(0px)',
    //     config: {
    //         // easing: easings.linear,
    //         duration:duration
    //     },
    // });
    const renderHeader = () => {
        let title = route ? route.title : "";
        let headerCls = route ? (route.headerCls || "") : '';
        let hideClose = route?.hideClose;
        return (
            <div className={`${styles.header} ${headerCls}`}>
                {
                    !hideClose && <button className={styles.close} onClick={() => {
                        close();
                    }}>
                        <SvgIcon className={styles.arrow} herf={"icon_Arrow"} />
                    </button>
                }

                <div className={styles.hcontent}>
                    {i18n.t(title)}
                </div>
            </div>
        );
    };
    const renderBar = () => {
        const Header = header;
        if (Header != null) {
            return (
                <Header id={'subbar'} className={styles.appbar} route={route} close={close} />
            );
        }
        return (
            <div id={'subbar'} className={styles.appbar}>
                {renderHeader()}
            </div>
        );
    };
    const renderContent = () => {
        return (
            <div className={styles.content}>
                {children}
            </div>
        );
    };
    useEffect(() => {
        setSidedGesture(0);
        return () => {
            setSidedGesture(0);
        };
    }, []);
    return (
        <CSSTransition timeout={timeout} {...props} classNames={{
            enter: isSideGesture ? styles.subscreen_enter_gesture : styles.subscreen_enter,
            enterActive: isSideGesture ? styles.subscreen_enter_active_gesture : styles.subscreen_enter_active,
            exit: isSideGesture ? styles.subscreen_exit_active_gesture : styles.subscreen_exit,
            exitActive: isSideGesture ? styles.subscreen_exit_active_gesture : styles.subscreen_exit_active,
        }}>
            {/*<animated.div className={styles.subscreen} style={showAni}>*/}
            {/*<animated.div className={styles.subscreen}>*/}
            <div className={styles.subscreen}>
                {renderBar()}
                {renderContent()}
            </div>
            {/*</animated.div>*/}
        </CSSTransition>
    );
};
SubScreen.propTypes = {
    open: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
};

export default SubScreen;
