jrshikoku/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

import React, { CSSProperties, FC, useEffect, useMemo, useState } from "react";
import { Text, View, LayoutAnimation, TextStyle } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { SheetManager } from "react-native-actions-sheet";
import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
import { migrateTrainName } from "../../../lib/eachTrainInfoCoreLib/migrateTrainName";
import { TrainIconStatus } from "./trainIconStatus";
import { TrainViewIcon } from "./trainViewIcon";
import { OneManText } from "./HeaderTextParts/OneManText";

type Props = {
  data: { trainNum: string; limited: string };
  trainData: string[];
  showHeadStation: number[];
  showTailStation: number[];
  headStation: { id: string }[];
  tailStation: { id: string }[];
  navigate: any;
  from: string;
  fontLoaded: boolean;
};

const textConfig: TextStyle = {
  fontSize: 18,
  fontWeight: "bold",
  color: "white",
};

export const HeaderText: FC<Props> = ({
  data,
  trainData,
  showHeadStation,
  showTailStation,
  headStation,
  tailStation,
  navigate,
  from,
}) => {
  const { limited, trainNum } = data;

  // 貨物の判定
  const freightDetect = (num:string)=>{
    switch(num){
      case "71":
        return "貨物 東京(タ)→高松(タ)";
      case "73":
      case "75":
        return "貨物 大阪(タ)→高松(タ)";
      case "3079":
        return "貨物 高松(タ)→伊予三島";
      case "3071":
      case "3077":
        return "貨物 高松(タ)→新居浜";
      case "3073":
        return "貨物 高松(タ)→松山貨物";
      case "70":
        return "貨物 高松(タ)→東京(タ)";
      case "74":
      case "76":
        return "貨物 高松(タ)→大阪(タ)";
      case "3078":
        return "貨物 伊予三島→高松(タ)";
      case "3070":
        return "貨物 新居浜→高松(タ)";
      case "3076":
        return "貨物 新居浜→高松(タ)";
      case "3072":
        return "貨物 松山貨物→高松(タ)";
      case "9070":
        return "貨物 臨時";
      default:
        return false;
    }
  }
  
  // 列車名、種別、フォントの取得
  const [typeName, trainName, fontAvailable] = useMemo(() => {
    if (!limited) return "";
    const limitedArray = limited.split(":");
    const [type, fontAvailable] = (() => {
      const d = getType(limitedArray[0]);
      switch (true) {
        case !!d:
          return [d, true];
        case !!trainNum.includes("T"):
          return ["単機回送", false];
        case !!trainNum.includes("R"):
        case !!trainNum.includes("E"):
        case !!trainNum.includes("L"):
        case !!trainNum.includes("A"):
        case !!trainNum.includes("B"):
          return ["回送", false];
        case !!trainNum.includes("H"):
          return ["試運転", false];
        case !!trainNum.match("D"):
        case !!trainNum.match("M"):
          return ["普通", true];
        case !!freightDetect(trainNum):
          return [freightDetect(trainNum), false];
        default:
          return ["", false];
      }
    })();
    switch (true) {
      case !!limitedArray[1]:
        // 特急の場合は、列車名を取得
        return [type, migrateTrainName(limitedArray[1]), fontAvailable];
      case trainData.length == 0:
        // 特急以外の場合は、列車番号を取得

        return [type, "", fontAvailable];
      default:
        // 行先がある場合は、行先を取得
        return [
          type,
          migrateTrainName(
            trainData[trainData.length - 1].split(",")[0] + "行き"
          ),
          fontAvailable,
        ];
    }
  }, [limited, trainData]);

  // 1人運転の判定
  const isOneMan = useMemo(() => {
    const OneManRegex = new RegExp(/^4[1-9]\d\d[DM]$/);
    const OneManRegex2 = new RegExp(/^5[1-7]\d\d[DM]$/);
    return !!(
      OneManRegex.test(trainNum) ||
      OneManRegex2.test(trainNum) ||
      trainNum === "3621D"
    );
  }, [trainNum]);

  return (
    <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
      <TrainIconStatus {...{ data, navigate, from }} />
      <View
        style={{ borderRadius: 5, flexDirection: "row", alignItems: "center" }}
      >
        <Text
          style={{
            fontSize: 20,
            color: "white",
            fontFamily: fontAvailable ? "JR-Nishi" : undefined,
            fontWeight: !fontAvailable ?"bold":undefined,
            marginRight: 5,
          }}
        >
          {typeName}
        </Text>
        {isOneMan && <OneManText />}
        <Text style={textConfig}>{trainName}</Text>
      </View>

      <View style={{ flex: 1 }} />
      <Text style={textConfig}>
        {showHeadStation.map((d) => `${headStation[d].id} + `)}
        {trainNum}
        {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
      </Text>

      <TrainViewIcon {...{ data, navigate, from }} />
    </View>
  );
};