jrshikoku/components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx

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

type seTypes = "発編" | "着編" | "通編" | "頃編" | "発" | "着" | string;

type currentTrainDataType = {
  Index: number;
  num: string;
  delay: "入線" | number | undefined;
  Pos: string;
  PosNum: number;
  Direction: number;
  Type: string;
  Line: string;
};
type props = {
  i: string;
  index: number;
  stationList: { StationName: string; StationNumber: string }[][];
  points: boolean;
  currentTrainData?: currentTrainDataType;
  openStationACFromEachTrainInfo?: (station: string) => void;
  showThrew: boolean;
};
export const EachStopList: FC<props> = ({
  i,
  index,
  stationList,
  points,
  currentTrainData,
  openStationACFromEachTrainInfo,
  showThrew,
}) => {
  const [station, se, time] = i.split(",") as [string, seTypes, string]; // 阿波池田,発,6:21
  if (!showThrew) {
    if (se == "通過") return null;
    if (se == "通編") return null;
  }
  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",]
  // Array [  "T",  "B",]
  // Array [  "01",  "01",]

  const textColor = `#${seType == "community" ? "44f" : "000"}${
    se == "通過" || se == "通編" ? "5" : ""
  }`;
  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%",
          }}
        >
          {StationNumbers.map((stn, index) => (
            <StationNumbersBox stn={stn} se={se} key={index} />
          ))}
        </View>
        <View
          style={{
            padding: 8,
            flexDirection: "row",
            borderBottomWidth: 1,
            borderBottomColor: "#f0f0f0",
            flex: 1,
          }}
        >
          <Text
            style={{
              fontSize: 20,
              color: textColor,
              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>
            )}
          </View>

          {currentTrainData?.delay &&
            currentTrainData?.delay != "入線" &&
            currentTrainData?.delay != 0 && (
              <Text
                style={{
                  fontSize: 15,
                  color: textColor,
                  width: 60,
                  position: "absolute",
                  right: 120,
                  textAlign: "right",
                  textDecorationLine: "line-through",
                  fontStyle: seType == "community" ? "italic" : "normal",
                }}
              >
                {time}
              </Text>
            )}
          <StationTimeBox
            delay={currentTrainData?.delay}
            textColor={textColor}
            seType={seType}
            se={se}
            time={time}
          />
          <Text style={{ fontSize: 18, width: 50, color: textColor }}>
            {seString}
          </Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
  const { stn, se } = props;
  const lineColor = lineColorList[stn.charAt(0)];
  const hasThrew = se == "通過" || se == "通編" ? "80" : "";
  const backgroundColor = `${lineColor}${hasThrew}`;
  return (
    <View style={{ backgroundColor, flex: 1 }} key={stn}>
      <View style={{ flex: 1 }} />
      <Text
        style={{
          color: "white",
          textAlign: "center",
          fontSize: 10,
          fontWeight: "bold",
        }}
      >
        {stn.charAt(0)}
        {"\n"}
        {stn.slice(1)}
      </Text>
      <View style={{ flex: 1 }} />
    </View>
  );
};

type StationTimeBoxType = {
  delay: "入線" | number | undefined;
  textColor: string;
  seType: seTypes;
  se: string;
  time: string;
};

const StationTimeBox: FC<StationTimeBoxType> = (props) => {
  const { delay, textColor, seType, se, time } = props;
  const dates = dayjs()
    .set("hour", parseInt(time.split(":")[0]))
    .set("minute", parseInt(time.split(":")[1]))
    .add(delay == "入線" || delay == undefined ? 0 : delay, "minute");
  const timeString = se == "通過" ? "" : dates.format("HH:mm");
  return (
    <Text
      style={{
        fontSize: 20,
        color:
          delay != "入線" && delay != undefined
            ? delay != 0 && "red"
            : textColor,
        width: 60,
        fontStyle: seType == "community" ? "italic" : "normal",
      }}
    >
      {se == "通過" ? "レ" : timeString}
    </Text>
  );
};