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} from "@react-spring/core";
const i18n=global.i18n;

const SubScreen=({open,onClose,children,route,renderComp})=>{
    const [subOpen,setSubOpen]=useState(open);
    const duration=230;
    const delayClose=()=>{
        if (onClose)onClose();
    }
    const close=()=>{
        setSubOpen(false);
        setTimeout(function () {
            delayClose();
        },duration);
    }
    useEffect(()=>{
        // extra.close=close;
    },[])
    const showAni=useSpring({
        from: {transform: 'translateX(100%) translateZ(0px)'},
        transform:subOpen?'translateX(0%) translateZ(0px)':'translateX(100%) translateZ(0px)',
        config: {
            easing: easings.linear,
            duration:duration
        },
        // onResolve: () => {
        //     if (!subOpen){
        //         if (onClose)onClose();
        //     }
        // },
    });
    const renderHeader=()=>{
        let title=route?route.title:"";
        return (
            <div className={styles.header}>
                <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=()=>{
        return (
            <div id={'subbar'} className={styles.appbar}>
                {renderHeader()}
            </div>
        )
    }
    const renderContent=()=>{
        // addExtraChildProps(children);
        // let list=children.length==null?[children]:children;
        // // {children}
        return (
            <div className={styles.content}>
                {/*{children}*/}
                {renderComp({close})}
            </div>
        )
    }
    return (
        <animated.div className={styles.subscreen} style={showAni}>
            {renderBar()}
            {renderContent()}
        </animated.div>
    )
}
SubScreen.propTypes = {
    open: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
    children: PropTypes.node.isRequired
}

export default SubScreen