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";
const i18n=global.i18n;

const SubScreen=({open,onClose,children,route,timeout,header})=>{
    // const [subOpen,setSubOpen]=useState(open);
    // console.log(header)
    const subOpen=open;
    const duration=timeout;
    // const duration=50;

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

    const showAni=useSpring({
        // ref: spref,
        from: {transform: 'translateX(100%) translateZ(0px)'},
        transform:subOpen?'translateX(0%) translateZ(0px)':'translateX(100%) translateZ(0px)',
        config: {
            easing: easings.linear,
            duration:duration
        },
    });
    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=()=>{
        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=()=>{
        // addExtraChildProps(children);
        // let list=children.length==null?[children]:children;
        // // {children}
        return (
            <div className={styles.content}>
                {children}
                {/*{renderComp?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