import { View } from '@tarojs/components'
import style from './index.module.scss'
import classnames from 'classnames'
import { memo, ReactNode, useEffect, useMemo, useRef, useState } 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, //弹出动画结束
  isFixed?: boolean //二次弹窗触发
}
export default memo(
  ({ title = '标题', show = false, showTitle = true, isFixed = false, 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)
      }
    }, [])

    const [ShowContext, setShowContext] = useState(false)
    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
                style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}`, }}
                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>
      </>
    )
  },
)