import React, { useEffect, useState, useRef } from "react";
import {
  View,
  LayoutAnimation,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Platform,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet, {
  SheetManager,
  useScrollHandlers,
} from "react-native-actions-sheet";
import { AS } from "../../storageControl";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
import {
  heightPercentageToDP,
  widthPercentageToDP,
} from "react-native-responsive-screen";
import lineColorList from "../../assets/originData/lineColorList";
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
import dayjs from "dayjs";
import { getTrainType } from "../../lib/getTrainType";
import { customTrainDataDetector } from "../custom-train-data";
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";

export const EachTrainInfo = (props) => {
  if (!props.payload) return <></>;
  const {
    data,
    navigate,
    originalStationList,
    openStationACFromEachTrainInfo = () => {},
    from,
  } = props.payload;
  const [trainData, setTrainData] = useState([]);
  const [currentPosition, setCurrentPosition] = useState([]);

  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");

  const { currentTrain } = useCurrentTrain();
  const { getInfluencedTrainData } = useBusAndTrainData();

  const [currentTrainData, setCurrentTrainData] = useState([]);
  const [nearTrainIDList, setNearTrainIDList] = useState([]);
  const [showNearTrain, setShowNearTrain] = useState([]);
  const [isConcatNear, setIsConcatNear] = useState(false);
  const [tailStation, setTailStation] = useState();
  const [headStation, setHeadStation] = useState();

  //裏列車探索
  useEffect(() => {
    if (!data.trainNum) return;
    const [returnArray, TDArray] = getInfluencedTrainData(data.trainNum);
    setNearTrainIDList(returnArray);
    setShowNearTrain(TDArray);
  }, [data]);

  useEffect(() => {
    if (trainData.length == 0) return;
    if (showNearTrain.length == 0) return;
    showNearTrain.forEach((d) => {
      const [station, se, time] = d.split(",");

      console.log(trainData); //trainDataは現在の列車の停車駅リスト
      console.log(station); //showNearTrainは裏列車の停車駅リスト
      console.log(trainData[0]);
      if (station == trainData[0].split(",")[0])
        setHeadStation(trainData[0].split(",")[0]);
      if (station == trainData[trainData.length - 1].split(",")[0])
        setTailStation(trainData[trainData.length - 1].split(",")[0]);
    });
  }, [trainData, showNearTrain]);

  const openBackTrainInfo = (stationInfo, currentTrainIndex) => {
    const mainTrainStationPosition = trainData.findIndex(
      (d) => d.split(",")[0] == stationInfo
    );
    const relationMain =
      mainTrainStationPosition == 0
        ? "head"
        : mainTrainStationPosition == trainData.length - 1
        ? "tail"
        : "middle";

    const subTrainStationPosition = showNearTrain.findIndex(
      (d) => d.split(",")[0] == stationInfo
    );
    const relationSub =
      subTrainStationPosition == 0
        ? "head"
        : subTrainStationPosition == showNearTrain.length - 1
        ? "tail"
        : "middle";
    switch (relationMain) {
      case "head":
        if (relationSub == "head") {
          break;
        } else if (relationSub == "tail") {
          const migrationTrainData = [
            ...showNearTrain.slice(0, subTrainStationPosition),
            ...trainData,
          ];
          setTrainData(migrationTrainData);
        } else if (relationSub == "middle") {
          const migrationTrainData = [
            ...showNearTrain.slice(0, subTrainStationPosition),
            ...trainData,
          ];
          setTrainData(migrationTrainData);
        }
        break;
      case "tail":
        if (relationSub == "head") {
          const migrationTrainData = [
            ...trainData.slice(0, mainTrainStationPosition),
            ...showNearTrain,
          ];
          setTrainData(migrationTrainData);
        } else if (relationSub == "tail") {
          break;
        } else if (relationSub == "middle") {
          const migrationTrainData = [
            ...trainData.slice(0, mainTrainStationPosition),
            ...showNearTrain.slice(subTrainStationPosition),
          ];
          setTrainData(migrationTrainData);
        }
        break;
      case "middle":
        if (relationSub == "head") {
          const migrationTrainData = [
            ...trainData.slice(0, mainTrainStationPosition),
            ...showNearTrain,
          ];
          setTrainData(migrationTrainData);
        } else if (relationSub == "tail") {
          const migrationTrainData = [
            ...showNearTrain.slice(0, subTrainStationPosition),
            ...trainData.slice(mainTrainStationPosition),
          ];
          setTrainData(migrationTrainData);
        }
        break;
    }
    setIsConcatNear(true);
  };

  const openTrainInfo = (d) => {
    const train = customTrainDataDetector(d);
    let TrainNumber = "";
    if (train.trainNumDistance != undefined) {
      const timeInfo =
        parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
      TrainNumber = timeInfo + "号";
    }
    const payload = {
      data: {
        trainNum: d,
        limited: `${getTrainType(train.type).data}:${
          train.trainName
        }${TrainNumber}`,
      },
      navigate,
      originalStationList,
      from: "AllTrainDiagramView",
    };
    //SheetManager.show("EachTrainInfo", { payload });
  };
  useEffect(() => {
    setCurrentTrainData(
      checkDuplicateTrainData(
        currentTrain.filter((d) => d.num == data.trainNum)
      )
    );
  }, [currentTrain]);

  useEffect(() => {
    //列車現在地アイコン表示スイッチ
    AS.getItem("trainPositionSwitch")
      .then((d) => {
        if (d) {
          setTrainPositionSwitch(d);
        } else {
        }
      })
      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
  }, []);
  //bconst insets = useSafeAreaInsets();
  const getStationData = (stationName) => {
    const Stations = stationList.map((a) =>
      a.filter((d) => d.StationName == stationName)
    );
    const Station =
      Stations &&
      Stations.reduce((newArray, e) => {
        return newArray.concat(e);
      }, []);
    if (!Station[0]) return [];
    return Station.map((d) => d.StationNumber)[0];
  };
  useEffect(() => {
    //currentTrainData.Pos = "鴨川～端岡"; //test
    if (!currentTrainData?.Pos) return;
    if (currentTrainData?.Pos.match("～")) {
      const pos = currentTrainData?.Pos.replace("（下り）", "")
        .replace("（上り）", "")
        .split("～");
      setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
    } else {
      setCurrentPosition([getStationData(currentTrainData?.Pos)]);
    }
  }, [currentTrainData]);

  const stationList =
    originalStationList &&
    lineList.map((d) =>
      originalStationList[d].map((a) => ({
        StationNumber: a.StationNumber,
        StationName: a.Station_JP,
      }))
    );
  const stopStationIDList = trainData.map((i, index) => {
    const [station, se, time] = i.split(",");
    const Stations = stationList.map((a) =>
      a.filter((d) => d.StationName == station)
    );
    const StationNumbers =
      Stations &&
      Stations.reduce((newArray, e) => {
        return newArray.concat(e);
      }, [])
        .filter((d) => d.StationNumber)
        .map((d) => d.StationNumber);
    return StationNumbers[0];
  });
  function findReversalPoints(array) {
    try {
      // arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
      // stopStationIDListは停車駅の駅IDの配列
      if (!stopStationIDList.length) return [];
      // arrayが二次元配列だったら早期リターン
      if (!array instanceof Array) return [];
      if (!array.length) return [];
      if (array[0] instanceof Array) return [];
      const arrayNumber = array.map((d) => ({
        line: d
          .split("")
          .filter((s) => "A" < s && s < "Z")
          .join(""),
        ID: d
          .split("")
          .filter((s) => "0" <= s && s <= "9")
          .join(""),
      }));
      const stopStationIDListNumber = stopStationIDList.map((d) => {
        if (!d) return { line: [], ID: [] };
        return {
          line: d
            .split("")
            .filter((s) => "A" < s && s < "Z")
            .join(""),
          ID: d
            .split("")
            .filter((s) => "0" <= s && s <= "9")
            .join(""),
        };
      });
      // 完全一致
      if (array.length == 1) {
        const index = stopStationIDList.indexOf(array[0]);
        if (index != -1) return [index];
        // 通過駅の場合
        for (let i = 0; i < stopStationIDListNumber.length - 1; i++) {
          if (stopStationIDListNumber[i].ID < arrayNumber[0].ID) {
            if (stopStationIDListNumber[i + 1].ID > arrayNumber[0].ID) {
              return [i + 1];
            }
          }
          if (stopStationIDListNumber[i].ID > arrayNumber[0].ID) {
            if (stopStationIDListNumber[i + 1].ID < arrayNumber[0].ID) {
              return [i + 1];
            }
          }
        }
      }
      // 駅間の場合
      if (array.length == 2) {
        const index1 = stopStationIDList.indexOf(array[0]);
        const index2 = stopStationIDList.indexOf(array[1]);
        if (index1 != -1 && index2 != -1) {
          // 駅間で通過駅も無い場合
          if (index1 < index2) {
            if (index1 + 1 == index2) {
              return [index2];
            } else {
              const returnArray = [];
              for (let i = index1 + 1; i <= index2; i++) {
                returnArray.push(i);
              }
              return returnArray;
            }
          }
          if (index1 > index2) {
            if (index2 + 1 == index1) return [index1];
            else {
              const returnArray = [];
              for (let i = index2 + 1; i <= index1; i++) {
                returnArray.push(i);
              }
              return returnArray;
            }
          }
        } else {
          const getNearStationID = (stationID) => {
            for (let i = 0; i <= stopStationIDListNumber.length; i++) {
              if (stopStationIDListNumber[i].ID < stationID) {
                if (stopStationIDListNumber[i + 1].ID > stationID) {
                  return i + 1;
                }
              }
              if (stopStationIDListNumber[i].ID > stationID) {
                if (stopStationIDListNumber[i + 1].ID < stationID) {
                  return i + 1;
                }
              }
            }
          };
          let newIndex1 = index1;
          let newIndex2 = index2;
          if (index1 == -1) {
            newIndex1 = getNearStationID(arrayNumber[0].ID);
          }
          if (index2 == -1) {
            newIndex2 = getNearStationID(arrayNumber[1].ID);
          }
          if (newIndex1 && newIndex2) {
            return [newIndex1, newIndex2];
          }

          // 通過駅の場合
        }

        return [];
      }
    } catch (e) {
      console.log(e);
    }
  }
  // 使用例
  const points =
    trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];

  useEffect(() => {
    if (!data.trainNum) return;
    const TD = trainList[data.trainNum];
    if (!TD) {
      setTrainData([]);
      return;
    }
    setTrainData(TD.split("#").filter((d) => d != ""));
  }, [data]);
  const getType = (string) => {
    switch (string) {
      case "express":
        return "特急";
      case "rapid":
        return "快速";
      default:
        return "";
    }
  };

  const migrateTrainName = (string) => {
    return string
      .replace("マリン", "マリンライナー")
      .replace("ライナーライナー", "ライナー");
  };
  const actionSheetRef = useRef(null);
  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
  return (
    <ActionSheet
      gestureEnabled={true}
      CustomHeaderComponent={<></>}
      ref={actionSheetRef}
      drawUnderStatusBar={false}
      isModal={Platform.OS == "ios"}
      //useBottomSafeAreaPadding={Platform.OS == "android"}
    >
      <View
        style={{
          backgroundColor: "#0099CC",
          borderTopRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
        }}
      >
        <View style={{ height: 26, width: "100%" }}>
          <View
            style={{
              height: 6,
              width: 45,
              borderRadius: 100,
              backgroundColor: "#f0f0f0",
              marginVertical: 10,
              alignSelf: "center",
            }}
          />
        </View>
        <View
          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
        >
          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
            {data.limited
              ? getType(data.limited.split(":")[0]) +
                migrateTrainName(
                  data.limited.split(":")[1] ||
                    (trainData.length > 0
                      ? trainData[trainData.length - 1].split(",")[0] + "行き"
                      : " ")
                )
              : ""}
          </Text>
          <View style={{ flex: 1 }} />
          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
            {data.trainNum}
            {isConcatNear ? ` + ${nearTrainIDList}` : ""}
          </Text>

          {data.limited != undefined &&
            getType(data.limited.split(":")[0]) &&
            !data.limited.split(":")[1].match("サンポート") && (
              <Ionicons
                name="subway"
                color="white"
                size={30}
                style={{ margin: 5 }}
                onPress={() => {
                  LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
                  navigate("trainbase", {
                    info: "train.html?tn=" + data.trainNum,
                    from,
                  });
                  SheetManager.hide("EachTrainInfo");
                }}
              />
            )}
        </View>
        {from == "AllTrainDiagramView" || (
          <ScrollView
            style={{
              flexDirection: "row",
              //width: widthPercentageToDP("200%"),
              minHeight: 200,
              height: heightPercentageToDP("20%"),
            }}
            horizontal
            pagingEnabled
          >
            <TrainDataView
              currentTrainData={currentTrainData}
              currentPosition={currentPosition}
            />
            {/* <View
              style={{
                flexDirection: "column",
                height: heightPercentageToDP("20%"),
                flex: 1,
                width: widthPercentageToDP("100%"),
              }}
            >
              <View style={{ flex: 1, flexDirection: "row" }}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    岡山
                  </Text>
                </View>

                <View
                  style={{
                    flex: 3,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
                    車両案内
                  </Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    宇多津でうずしお号と連結
                  </Text>
                </View>
              </View>
              <View style={{ flex: 1, flexDirection: "row" }}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
                    編成(使用車両：2700系)
                  </Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "left",
                    }}
                  >
                    {"[<自][自>][アン自|指>][アン指|G>]"}
                  </Text>
                </View>
              </View>
            </View> */}
          </ScrollView>
        )}
        <View
          style={{
            alignItems: "center",
            backgroundColor: "white",
            flexDirection: "row",
          }}
        >
          <View
            style={{
              padding: 8,
              flexDirection: "row",
              borderBottomWidth: 1,
              borderBottomColor: "#f0f0f0",
              flex: 1,
            }}
          >
            <Text style={{ fontSize: 20 }}>停車駅</Text>
            <View style={{ flex: 1 }} />
            <View style={{ flexDirection: "row" }}>
              {!isNaN(currentTrainData?.delay) &&
                currentTrainData?.delay != 0 && (
                  <Text
                    style={{
                      fontSize: 15,
                      color: "black",
                      position: "absolute",
                      right: 110,
                      textAlign: "right",
                      textDecorationLine: "line-through",
                    }}
                  >
                    (定刻)
                  </Text>
                )}
              <Text
                style={{
                  fontSize: 20,
                  color: isNaN(currentTrainData?.delay)
                    ? "black"
                    : currentTrainData?.delay == 0
                    ? "black"
                    : "red",
                  width: 60,
                }}
              >
                見込
              </Text>
              <Text style={{ fontSize: 20, width: 50 }}></Text>
            </View>
          </View>
        </View>
        <ScrollView
          {...scrollHandlers}
          style={{
            maxHeight: heightPercentageToDP(
              from == "AllTrainDiagramView" ? "70%" : "50%"
            ),
            backgroundColor: "white",
          }}
        >
          {headStation && !isConcatNear && (
            <TouchableOpacity
              onPress={() => openBackTrainInfo(headStation)}
              style={{
                padding: 10,
                flexDirection: "row",
                borderColor: "blue",
                borderWidth: 1,
                margin: 10,
                borderRadius: 5,
                alignItems: "center",
              }}
            >
              <Text
                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
              >
                「本当の始発駅」を表示
              </Text>
            </TouchableOpacity>
          )}
          {/* <LottieView
                autoPlay
                loop
                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
                source={require("../../assets/51690-loading-diamonds.json")}
              />
              <Text>ほげほげふがふが</Text> */}

          {trainData.map((i, index) =>
            i.split(",")[1] == "提" ? (
              <DataFromButton i={i} />
            ) : (
              <StationButton
                i={i}
                index={index}
                stationList={stationList}
                points={points}
                currentTrainData={currentTrainData}
                openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
              />
            )
          )}
          {tailStation && !isConcatNear && (
            <TouchableOpacity
              onPress={() => openBackTrainInfo(tailStation)}
              style={{
                padding: 10,
                flexDirection: "row",
                borderColor: "blue",
                borderWidth: 1,
                margin: 10,
                borderRadius: 5,
                alignItems: "center",
              }}
            >
              <Text
                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
              >
                「本当の終着駅」を表示
              </Text>
            </TouchableOpacity>
          )}

          <View style={{ flexDirection: "row" }}>
            <View
              style={{
                padding: 8,
                flexDirection: "row",
                borderBottomWidth: 1,
                borderBottomColor: "#f0f0f0",
                flex: 1,
              }}
            >
              <Text style={{ fontSize: 20 }}> </Text>
              <View style={{ flex: 1 }} />
            </View>
          </View>
        </ScrollView>
      </View>
    </ActionSheet>
  );
};

const DataFromButton = ({ i }) => {
  const [station, se, time] = i.split(",");
  return (
    <TouchableWithoutFeedback
      onPress={() => Linking.openURL(time)}
      key={station}
    >
      <View style={{ flexDirection: "row" }}>
        <View
          style={{
            padding: 8,
            flexDirection: "row",
            borderBottomWidth: 1,
            borderBottomColor: "#f0f0f0",
            flex: 1,
          }}
        >
          <Text style={{ fontSize: 20 }}>{station}</Text>
          <View style={{ flex: 1 }} />
          <Text style={{ fontSize: 18 }}>
            提供元
            <MaterialCommunityIcons
              name={"open-in-new"}
              color="black"
              size={20}
            />
          </Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

const StationButton = ({
  i,
  index,
  stationList,
  points,
  currentTrainData,
  openStationACFromEachTrainInfo,
}) => {
  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);
  // 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 = dates.format("HH:mm").split(":");

  return (
    <TouchableWithoutFeedback
      onPress={() => openStationACFromEachTrainInfo(station)}
      key={station}
    >
      <View style={{ flexDirection: "row", backgroundColor: "white" }}>
        <View
          style={{
            width: 35,
            position: "relative",
            marginHorizontal: 15,
            flexDirection: "row",
            height: "101%",
          }}
        >
          {lineIDs.map((lineID, index) => (
            <View
              style={{
                backgroundColor: lineColorList[lineID],
                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 }}>{station}</Text>
          <View style={{ flex: 1 }} />
          {points && points.findIndex((d) => d == index) >= 0 ? (
            <Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
          ) : null}
          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
            <Text
              style={{
                fontSize: 15,
                color: "black",
                width: 60,
                position: "absolute",
                right: 120,
                textAlign: "right",
                textDecorationLine: "line-through",
              }}
            >
              {time}
            </Text>
          )}
          <Text
            style={{
              fontSize: 20,
              color: isNaN(currentTrainData?.delay)
                ? "black"
                : currentTrainData?.delay == 0
                ? "black"
                : "red",
              width: 60,
            }}
          >
            {timeString[0]}:{timeString[1]}
          </Text>
          <Text style={{ fontSize: 18, width: 50 }}>
            {se?.replace("発", "出発").replace("着", "到着")}
          </Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

const TrainDataView = ({ currentTrainData, currentPosition }) => {
  return (
    <View
      style={{
        flexDirection: "row",
        minHeight: 200,
        height: heightPercentageToDP("20%"),
        width: widthPercentageToDP("100%"),
      }}
    >
      <StateBox
        title={`現在地 ${currentPosition.toString()}`}
        text={
          currentTrainData?.Pos.match("～")
            ? `${
                currentTrainData?.Pos.replace("（下り）", "")
                  .replace("（上り）", "")
                  .split("～")[0]
              }～${
                currentTrainData?.Pos.replace("（下り）", "")
                  .replace("（上り）", "")
                  .split("～")[1]
              }`
            : currentTrainData?.Pos
        }
      />
      <View style={{ flex: 1, flexDirection: "column" }}>
        <StateBox
          title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
          text={`${currentTrainData?.delay}${
            isNaN(currentTrainData?.delay) ? "" : "分"
          }`}
        />
        <StateBox title="列番" text={currentTrainData?.num} />
      </View>
    </View>
  );
};

const StateBox = ({ text, title }) => (
  <View style={boxStyle}>
    <Text style={{ fontSize: 15, color: "#0099CC" }}>{title}</Text>
    <View style={{ flex: 1 }} />
    <View style={{ fontSize: 32, color: "#0099CC", textAlign: "right" }}>
      {text?.match("～") ? (
        <>
          <Text style={boxTextStyle}>{text.split("～")[0]}</Text>
          <Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
          <Text style={boxTextStyle}>{text.split("～")[1]}</Text>
        </>
      ) : (
        <Text style={boxTextStyle}>{text}</Text>
      )}
    </View>
  </View>
);
const boxStyle = {
  flex: 1,
  backgroundColor: "white",
  borderRadius: 10,
  padding: 10,
  margin: 10,
};
const boxTextStyle = {
  fontSize: 28,
  color: "#0099CC",
  textAlign: "right",
};