import { View, RootPortal } from "@tarojs/components";
import style from "./index.module.less";
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";

type Ttype = "primary" | "warn"
interface Props {
  title?: string;
  setShow: (show: boolean) => void;
  show: boolean;
  content: { item: string | JSX.Element; type?: Ttype, onClick?: ()=> void}[];
  header?: JSX.Element | JSX.Element[];
  bottom?: JSX.Element[];
  maskClosable?: boolean
}
export default ({ content, show, setShow, maskClosable = true }: Props) => {
  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){
      Taro.hideTabBar();
      setTimeout(() => {
        setSlideUp(show);
      }, 100);
    }else{
      Taro.showTabBar().catch(()=> {});
    }
    
  }, [show]);

  const getTypeClassName = (type?: Ttype) => {
    if(type === 'primary'){
      return 'primary-color'
    }
    if(type === 'warn'){
      return 'warn-color'
    }
    return ''
  }

  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.content}>
              {content.map((data, index) => {
                return (
                  <View
                    className={`${style.item}
                    ${getTypeClassName(data.type)}
                    ${
                      index < content.length ? style.bottomBorder : ""
                    }`}
                    onClick={()=> data.onClick && data.onClick()}
                  >
                    {data.item}
                  </View>
                );
              })}
            </View>
            <View className={style.bottomContainer} onClick={()=> handleClose(false)}>
              <View className={style.bottomButton}>取消</View>
            </View>
          </View>
        </View>
        </RootPortal>
      )}
    </>
  );
};
