import { View } from "@tarojs/components";
import style from "./index.module.scss"
import classnames from "classnames";
import { memo, ReactNode, useMemo } 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'
}
export default memo((
    {
        title = '标题', 
        show = false, 
        showTitle = true, 
        onClose, 
        showIconButton = false, 
        children,
        position = 'bottom'
    }:Params) => {
    
    
    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}> 
                                {children}
                            </View>
                            <View className="common_safe_area_y"></View>
                        </View>
                    </View>
                </View>
            </View>
        </>
    )
})