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;
  maskClosable?: boolean
  children?: JSX.Element | JSX.Element[];
}
export default ({
  title = "",
  showCloseButton = true,
  show,
  setShow,
  children,
  maskClosable = true,
}: IProps) => {
  const [slideUp, setSlideUp] = useState(false);
  const handleMaskClick = ()=> {
    maskClosable && handleClose(false)
  }
  const handleClose = (b: boolean) => {
    setSlideUp(false);
    setTimeout(() => {
      setShow(b);
      Taro.showTabBar().catch(()=> {});
    }, 100);
  };

  useEffect(() => {
    if (show) {
      setTimeout(() => {
        setSlideUp(true);
      }, 100);
      Taro.hideTabBar().catch(()=> {});
    } else {
      Taro.showTabBar().catch(()=> {});
      
    }
  }, [show]);

  return (
    <>
      {show && (
        <RootPortal>
          <View className={`taro-portal-container ${style.popup}`} onClick={handleMaskClick}>
            <View className={`${style.container} ${slideUp ? style.show : ""}`} onClick={(e)=> {e.stopPropagation()}}>
              <View className={style.titleBar}>
                <View className={style.title}>{title}</View>
                {showCloseButton && (
                  <View className={style.closeButtonWrapper} onClick={() => handleClose(false)}>
                    <View
                      className={style.closeButton}
                    >
                      <Image
                        src={closeIcon}
                        mode="widthFix"
                        className={style.closeIcon}
                      />
                    </View>
                  </View>
                )}
              </View>
              <View className={style.content}>{children}</View>
            </View>
          </View>
        </RootPortal>
      )}
    </>
  );
};
