import { View, Image, RootPortal } from "@tarojs/components"
import style from './index.module.less'
import closeIcon from '@/images/icon-close-8.png';
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
interface IProps {
  title?: string
  setShow: (show: boolean)=>void
  show: boolean,
  showCloseButton?: boolean
  children?: JSX.Element|JSX.Element[]
}
export default ({title = '', showCloseButton = true, show, setShow, children}: IProps)=> {
  const [slideUp, setSlideUp] = useState(false)
  const handleClose = (b: boolean) => {
    setSlideUp(false)
    setTimeout(()=> {
      setShow(b)
      Taro.showTabBar()
    }, 100)
    
  }

  useEffect(()=> {
    if(show){
      setTimeout(()=> {
        setSlideUp(true)
      }, 100)  
      Taro.hideTabBar();
    }else{
      Taro.showTabBar();
    }
    
  }, [show])
  
  return <>
    {show && <RootPortal><View
      className={`taro-portal-container ${style.popup}`}
    >
      <View className={`${style.container} ${slideUp ? style.show : ''}`}>
        <View className={style.titleBar}>
          <View className={style.title}>{title}</View>
          {showCloseButton && <View className={style.closeButton} onClick={()=>handleClose(false)}>
            <Image src={closeIcon} mode="widthFix" className={style.closeIcon} />
          </View>}
        </View>
        <View className={style.content}>
          {children}
        </View>
      </View>
   </View></RootPortal>}
  </>
}