import { View, Text, TouchableOpacity, Modal } from "react-native";
import React from "react";
import { useTailwind } from "tailwind-rn";

export default function MyModal({
  visible,
  setVisible,
  title,
  content,
  confirm,
  custom,
  customText,
  confirmText,
  cancelText,
  confirmLeft = false,
}) {
  const tailwind = useTailwind();
  return (
    <Modal
      visible={visible}
      statusBarTranslucent
      transparent={true}
      style={tailwind("flex-1")}
    >
      <View
        style={{
          backgroundColor: "#00000080",
          ...tailwind("flex-1 items-center justify-center"),
        }}
      >
        <View
          style={tailwind("p-2 rounded-2xl bg-[#17161A] items-center w-3/4")}
        >
          <Text
            style={tailwind(
              "text-white text-xl font-semibold text-center mt-2"
            )}
          >
            {title}
          </Text>
          <Text
            style={tailwind("text-[#FFFFFF80] text-sm font-medium mt-2 mb-4")}
          >
            {content}
          </Text>
          <View style={tailwind("flex-row justify-around")}>
            {custom ? (
              <TouchableOpacity
                onPress={custom}
                style={tailwind(
                  "border-t-2 border-[#2c2b2f] w-full pt-1 justify-center items-center"
                )}
              >
                <Text
                  style={tailwind(
                    "text-white text-base font-medium text-center"
                  )}
                >
                  {customText ? customText : "确认"}
                </Text>
              </TouchableOpacity>
            ) : (
              <>
                {confirmLeft && (
                  <TouchableOpacity
                    onPress={confirm}
                    style={tailwind(
                      "border-r-2 border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
                    )}
                  >
                    <Text
                      style={tailwind(
                        "text-white text-base font-medium text-center"
                      )}
                    >
                      {confirmText ? confirmText : "确认"}
                    </Text>
                  </TouchableOpacity>
                )}
                <TouchableOpacity
                  onPress={() => setVisible(false)}
                  style={
                    confirmLeft
                      ? tailwind(
                          "border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
                        )
                      : tailwind(
                          "border-r-2 border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
                        )
                  }
                >
                  <Text
                    style={tailwind(
                      "text-[#FFFFFF80] text-base font-medium text-center"
                    )}
                  >
                    {cancelText ? cancelText : "取消"}
                  </Text>
                </TouchableOpacity>
                {!confirmLeft && (
                  <TouchableOpacity
                    onPress={confirm}
                    style={tailwind(
                      "border-t-2 border-[#2c2b2f] basis-1/2 pt-1 justify-center items-center"
                    )}
                  >
                    <Text
                      style={tailwind(
                        "text-white text-base font-medium text-center"
                      )}
                    >
                      {confirmText ? confirmText : "确认"}
                    </Text>
                  </TouchableOpacity>
                )}
              </>
            )}
          </View>
        </View>
      </View>
    </Modal>
  );
}