jrshikoku/components/ActionSheetComponents/EachTrainInfo/EachStopList.js

import React from "react";
import { View, Text, TouchableWithoutFeedback } from "react-native";
import dayjs from "dayjs";
import lineColorList from "../../../assets/originData/lineColorList";

export const EachStopList = ({
  i,
  index,
  stationList,
  points,
  currentTrainData,
  openStationACFromEachTrainInfo,
  showThrew,
}) => {
  if (!showThrew) {
    if (i.split(",")[1] == "通過") return null;
    if (i.split(",")[1] == "通編") return null;
  }
  const [station, se, time] = i.split(","); // 阿波池田,発,6:21
  const Stations = stationList
    .map((a) => a.filter((d) => d.StationName == station))
    .reduce((newArray, e) => newArray.concat(e), []);
  /*Array [
        Object {
          "StationName": "佐古",
          "StationNumber": "T01",
        },
        Object {
          "StationName": "佐古",
          "StationNumber": "B01",
        },
      ] */
  const StationNumbers =
    Stations &&
    Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
  const [seString, seType] = (() => {
    switch (se) {
      case "発":
        return ["出発", "normal"];
      case "着":
        return ["到着", "normal"];
      case "発編":
        return ["出発", "community"];
      case "着編":
        return ["到着", "community"];
      case "通編":
        return ["通過", "community"];
      case "頃編":
        return ["頃", "community"];
      default:
        return [se, "normal"];
    }
  })();
  // Array [  "T01",  "B01",]
  const lineIDs = [];
  const EachIDs = [];
  StationNumbers.forEach((d) => {
    const textArray = d.split("");
    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
  });
  // Array [  "T",  "B",]
  // Array [  "01",  "01",]

  const dates = dayjs()
    .set("hour", parseInt(time.split(":")[0]))
    .set("minute", parseInt(time.split(":")[1]))
    .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
  const timeString = se == "通過" ? "" : dates.format("HH:mm");

  return (
    <TouchableWithoutFeedback
      onPress={() =>
        openStationACFromEachTrainInfo &&
        openStationACFromEachTrainInfo(station)
      }
      key={station}
    >
      <View
        style={{
          flexDirection: "row",
          backgroundColor: "#ffffffc2",
        }}
      >
        <View
          style={{
            width: 35,
            position: "relative",
            marginHorizontal: 15,
            flexDirection: "row",
            height: "101%",
          }}
        >
          {lineIDs.map((lineID, index) => (
            <View
              style={{
                backgroundColor: `${lineColorList[lineID]}${
                  se == "通過" || se == "通編" ? "80" : ""
                }`,
                flex: 1,
              }}
              key={lineID}
            >
              <View style={{ flex: 1 }} />
              <Text
                style={{
                  color: "white",
                  textAlign: "center",
                  fontSize: 10,
                  fontWeight: "bold",
                }}
              >
                {lineIDs[index]}
                {"\n"}
                {EachIDs[index]}
              </Text>
              <View style={{ flex: 1 }} />
            </View>
          ))}
        </View>
        <View
          style={{
            padding: 8,
            flexDirection: "row",
            borderBottomWidth: 1,
            borderBottomColor: "#f0f0f0",
            flex: 1,
          }}
        >
          <Text
            style={{
              fontSize: 20,
              color: `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`,
              fontStyle: seType == "community" ? "italic" : "normal",
            }}
          >
            {station}
          </Text>
          <View style={{ flex: 1 }} />
          <View style={{ position: "relative", width: 0 }}>
            {points ? (
              <Text style={{ fontSize: 20, position: "absolute", left: -60 }}>
                🚊
              </Text>
            ) : null}
          </View>

          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
            <Text
              style={{
                fontSize: 15,
                color: `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`,
                width: 60,
                position: "absolute",
                right: 120,
                textAlign: "right",
                textDecorationLine: "line-through",
                fontStyle: seType == "community" ? "italic" : "normal",
              }}
            >
              {time}
            </Text>
          )}
          <Text
            style={{
              fontSize: 20,
              color: isNaN(currentTrainData?.delay)
                ? `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`
                : currentTrainData?.delay == 0
                ? `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`
                : "red",
              width: 60,
              fontStyle: seType == "community" ? "italic" : "normal",
            }}
          >
            {se == "通過" ? "レ" : timeString}
          </Text>
          <Text style={{ fontSize: 18, width: 50,color:`#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}` }}>{seString}</Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};