import React, { CSSProperties, FC } from "react";
import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native";

type stateBox = {
  text: string;
  title: string;
  style?: ViewStyle;
  mode?: number;
  endText?: string;
};
export const StateBox: FC<stateBox> = (props) => {
  const { text, title, style, mode, endText } = props;
  return (
    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
      <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
      <View style={{ flex: 1 }} />
      <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
        {text?.match("～") ? (
          <>
            <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
              {text.split("～")[0]}
            </Text>
            <Text style={{ color: "#0099CC", textAlign: "right" }}>
              {mode == 2 ? "→" : "↓"}
            </Text>
            <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>
              {text.split("～")[1]}
            </Text>
          </>
        ) : (
          <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
        )}
      </View>
      {endText && (
        <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
          <Text
            style={{
              ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
              fontSize: 10,
            }}
          >
            {endText}
          </Text>
        </View>
      )}
    </View>
  );
};
const boxStyle: ViewStyle = {
  flex: 1,
  backgroundColor: "white",
  borderRadius: 10,
  padding: 10,
  margin: 10,
};
const boxStyle2: ViewStyle = {
  flex: 1,
  backgroundColor: "white",
  borderRadius: 10,
  padding: 5,
  margin: 5,
};
const boxTextStyle2: TextStyle = {
  fontSize: 18,
  color: "#0099CC",
  textAlign: "right",
};

const boxTextStyle: TextStyle = {
  fontSize: 25,
  color: "#0099CC",
  textAlign: "right",
};