jrshikoku/components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx

import { trainPosition, trainDataType } from "@/lib/trainPositionTextArray";
import React, { FC } from "react";
import { View, Text, ViewStyle } from "react-native";
import { useThemeColors } from "@/lib/theme";
import { useResponsive } from "@/lib/responsive";

type stateBox = {
  currentTrainData: trainDataType | undefined;
  platformNumber: string | number | undefined;
  title: string;
  style?: ViewStyle;
  mode?: number;
  platformDescription: string;
  lineNumber: string;
};
export const PositionBox: FC<stateBox> = (props) => {
  const {
    currentTrainData,
    platformNumber,
    title,
    style,
    mode,
    platformDescription,
    lineNumber,
  } = props;
  const { colors } = useThemeColors();
  const { fontScale } = useResponsive();
  let firstText = "";
  let secondText = "";
  let marginText = "";
  let externalText = "";
  const { isBetween, Pos: PosData } = trainPosition(currentTrainData);
  if (isBetween === true) {
    const { from, to } = PosData;
    firstText = from;
    secondText = to;
    marginText = mode == 2 ? "→" : "↓";
  } else {
    const { Pos } = PosData;
    if (Pos !== "") {
      firstText = Pos;
      if (platformNumber) {
        secondText = `${platformNumber}番乗り場`;
        if (lineNumber) {
          externalText = `${lineNumber}番線`;
        }
      } else if (lineNumber) {
        secondText = `${lineNumber}番線`;
      }
    }
  }
  return (
    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), backgroundColor: colors.surface, ...style }}>
      <Text style={{ fontSize: fontScale(12), color: colors.textAccent }}>{title}</Text>
      <View style={{ flex: 1 }} />
      <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
        {firstText && (
          <Text style={[mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : (isBetween ? { fontSize: fontScale(25), textAlign: "right" as const } : { fontSize: fontScale(28), textAlign: "right" as const }), { color: colors.textAccent }]}>
            {firstText}
          </Text>
        )}
        {marginText && (
          <Text style={{ color: colors.textAccent, textAlign: "right" }}>
            {marginText}
          </Text>
        )}
        {secondText && (
          <Text style={[mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } :(isBetween ? { fontSize: fontScale(25), textAlign: "right" as const } : { fontSize: fontScale(16), textAlign: "right" as const }), { color: colors.textAccent }]}>
            {secondText}
          </Text>
        )}
      </View>
      {(platformDescription || externalText) && (
        <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
          <Text
            style={{
              ...(mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : { fontSize: fontScale(25), textAlign: "right" as const }),
              fontSize: fontScale(10),
              color: colors.textAccent,
            }}
          >
            {" " + externalText}
            {" " + platformDescription}
          </Text>
        </View>
      )}
    </View>
  );
};
const boxStyle: ViewStyle = {
  flex: 1,
  borderRadius: 10,
  padding: 10,
  margin: 10,
};
const boxStyle2: ViewStyle = {
  flex: 1,
  borderRadius: 10,
  padding: 5,
  margin: 5,
};