import { View } from "@tarojs/components";
import React, { CSSProperties, ReactNode } from "react";
import styles from "./oui-popup.module.scss";
import OuiSafeArea from "@/components/oui-safearea/oui-safearea";

interface OuiPopUpProps {
  className?: string;
  alignment?: "top" | "bottom";
  visible?: boolean;
  height?: number;
  contentColor?: string;
  maskColor?: string;
  onMaskClick?: Function;
  children?: ReactNode;
  style?: CSSProperties;
}

function OuiPopUp({
  className,
  alignment = "bottom",
  visible = false,
  height,
  contentColor = "#ffffff",
  maskColor = "#00000022",
  onMaskClick = () => {},
  children,
  style,
}: OuiPopUpProps) {
  const componentStyle = (): CSSProperties => {
    const tempStyles: CSSProperties = {};
    tempStyles.zIndex = 100;
    if (!style?.backgroundColor) {
      tempStyles.backgroundColor = contentColor;
    }
    switch (alignment) {
      case "top":
        tempStyles.top = 0;
        tempStyles.transform = visible ? "" : "translateY(-100%)";
        tempStyles.left = "0";
        tempStyles.width = "100%";
        break;
      case "bottom":
        tempStyles.bottom = 0;
        tempStyles.transform = visible ? "" : "translateY(100%)";
        tempStyles.left = "0";
        tempStyles.width = "100%";
        break;

      default:
        break;
    }
    return tempStyles;
  };

  const contentStyle = (): CSSProperties => {
    const tempStyles: CSSProperties = {};
    tempStyles.height = height ? `${height}px` : "fit-content";
    return tempStyles;
  };

  const maskStyle = (): CSSProperties => {
    const tempStyles: CSSProperties = {};
    tempStyles.background = maskColor;
    tempStyles.visibility = visible ? "visible" : "hidden";
    tempStyles.opacity = visible ? "1" : "0";
    tempStyles.zIndex = (componentStyle().zIndex as number) - 1;
    return tempStyles;
  };

  return (
    <>
      <View
        className={styles.component}
        style={{ ...componentStyle(), ...style }}
        catchMove
      >
        <View className={styles.content} style={{ ...contentStyle() }}>
          {children}
        </View>
        <OuiSafeArea />
      </View>
      <View
        className={`${styles.mask} ${className}`}
        style={{ ...maskStyle() }}
        catchMove
        onClick={(e) => onMaskClick(e)}
      ></View>
    </>
  );
}

export default OuiPopUp;