import { View } from "@tarojs/components";
import style from "./index.module.scss"
import classnames from "classnames";
import { memo, ReactNode, useEffect, useMemo, useRef } from "react";
import CloseBtnIcon from "@/components/closeBtn"

export interface Params {
    title?: string, //标题
    show?: false|true, //显示显示弹窗
    showTitle?: false|true, //是否显示标题
    onClose?:() => void, //关闭事件
    children?: ReactNode, //插槽内容
    // IconButton?: ReactNode, //
    showIconButton?: false|true, //是否显示关闭按钮
    position?: 'bottom'|'top'|'right', //弹出位置
    animationEnd?: () => void //弹出动画结束
}
export default memo((
    {
        title = '标题', 
        show = false, 
        showTitle = true, 
        onClose, 
        showIconButton = false, 
        children,
        position = 'bottom',
        animationEnd
    }:Params) => {
    
    const animationTime = useRef<any>(null)
    useEffect(() => {
        if(show) {
            animationTime.current = setTimeout(() => {
                animationEnd?.()
            }, 260)
        } else {
            clearTimeout(animationTime.current)
        }
    }, [show])

    useEffect(() => {
        return () => {
            clearTimeout(animationTime.current)
        }
    }, [])
    
    return (
        <>
            <View className={style.drawer_main}>
                <View catchMove={true} className={`${style.drawer} ${show?style.drawer_active:''}` }>
                    <View
                        className={classnames(style.drawer_mask, {[style.drawer_mask_active]: show})}
                        onClick={() =>  onClose?.()}
                    >
                        <View  
                            className={classnames(style.drawer_container, style['drawer_container_'+position], {[style.drawer_container_active]: show})}
                            onClick={(e) => e.stopPropagation()}
                        >
                            {showTitle&&<View className={style.drawer_container_title}>{title}</View>}
                            {showIconButton&&<View className={style.common_close_btn_icon}>
                                <CloseBtnIcon onClose={() => onClose?.()}/>
                            </View>}
                            
                            <View className={style.drawer_container_context}> 
                                {show&&children}
                            </View>
                            <View className="common_safe_area_y"></View>
                        </View>
                    </View>
                </View>
            </View>
        </>
    )
})