import React, { CSSProperties } from "react";
import OuiModal from "@/components/oui-modal/oui-modal";
import { View } from "@tarojs/components";
import styles from "./oui-message-box.module.scss";
import OuiLine from "@/components/oui-line/oui-line";
import { Direction } from "@/components/global/direction";

interface OuiMessageBoxProps {
  visible?: boolean;
  onMaskClick?: Function;
  title?: string;
  content: string;
  showCancelButton?: boolean;
  showConfirmButton?: boolean;
  cancelText?: string;
  confirmText?: string;
  titleColor?: string;
  contentColor?: string;
  cancelColor?: string;
  confirmColor?: string;
}

function OuiMessageBox({
  visible = false,
  onMaskClick = () => {},
  title,
  content,
  showCancelButton = true,
  showConfirmButton = true,
  cancelText = "取消",
  confirmText = "确认",
  titleColor = "#141414",
  contentColor = "#141414",
  cancelColor = "#999999",
  confirmColor = "#141414",
}: OuiMessageBoxProps) {
  const titleStyle = (): CSSProperties => {
    return {
      color: titleColor,
    };
  };
  const contentStyle = (): CSSProperties => {
    return {
      color: contentColor,
    };
  };
  const cancelStyle = (): CSSProperties => {
    return {
      color: cancelColor,
    };
  };
  const confirmStyle = (): CSSProperties => {
    return {
      color: confirmColor,
    };
  };
  return (
    <OuiModal
      visible={visible}
      onMaskClick={onMaskClick}
      padding={0}
      style={{ minWidth: "240px", maxWidth: "calc(100% - (32rpx * 2))" }}
    >
      {title ? (
        <>
          <View className={styles.header} style={titleStyle()}>
            {title}
          </View>
          <OuiLine />
        </>
      ) : null}
      <View className={styles.content} style={contentStyle()}>
        {content}
      </View>
      {showCancelButton || showConfirmButton ? (
        <>
          <OuiLine />
          <View className={styles.footer}>
            <View className={styles.button} style={cancelStyle()}>
              {cancelText}
            </View>
            <OuiLine direction={Direction.vertical} />
            <View className={styles.button} style={confirmStyle()}>
              {confirmText}
            </View>
          </View>
        </>
      ) : null}
    </OuiModal>
  );
}

export default OuiMessageBox;