import React, { useEffect, useState, useRef } from "react";
import {
View,
LayoutAnimation,
ScrollView,
Linking,
Text,
TouchableOpacity,
TouchableWithoutFeedback,
TouchableHighlight,
Platform,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet, {
SheetManager,
useScrollHandlers,
} from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { AS } from "../../storageControl";
import LottieView from "lottie-react-native";
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";
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 [currentTrainData, setCurrentTrainData] = useState([]);
const [nearTrainIDList, setNearTrainIDList] = useState([]);
useEffect(() => {
const returnArray = [];
if (!data.trainNum) return;
if (
new RegExp(/^4[1-9]\d\d[DM]$/).test(data.trainNum) ||
new RegExp(/^5[1-7]\d\d[DM]$/).test(data.trainNum)
) {
if (trainList[data.trainNum.substring(1)]) {
returnArray.push(data.trainNum.substring(1));
}
}
if (new RegExp(/^[1-9]\d\d[DM]$/).test(data.trainNum)) {
if (trainList["4" + data.trainNum]) {
returnArray.push("4" + data.trainNum);
}
if (trainList["5" + data.trainNum]) {
returnArray.push("5" + data.trainNum);
}
}
setNearTrainIDList(returnArray);
}, [data]);
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 (
}
ref={actionSheetRef}
drawUnderStatusBar={false}
isModal={Platform.OS == "ios"}
//useBottomSafeAreaPadding={Platform.OS == "android"}
>
{data.limited
? getType(data.limited.split(":")[0]) +
migrateTrainName(
data.limited.split(":")[1] ||
(trainData.length > 0
? trainData[trainData.length - 1].split(",")[0] + "行き"
: " ")
)
: ""}
{
nearTrainIDList.length && openTrainInfo(nearTrainIDList[0]);
}}
>
{data.trainNum}
{nearTrainIDList.length ? "..." : ""}
{data.limited != undefined &&
getType(data.limited.split(":")[0]) &&
!data.limited.split(":")[1].match("サンポート") && (
{
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
navigate("trainbase", {
info: "train.html?tn=" + data.trainNum,
from,
});
SheetManager.hide("EachTrainInfo");
}}
/>
)}
{from == "AllTrainDiagramView" || (
{/*
行先
岡山
車両案内
宇多津でうずしお号と連結
編成(使用車両：2700系)
{"[<自][自>][アン自|指>][アン指|G>]"}
*/}
)}
停車駅
{!isNaN(currentTrainData?.delay) &&
currentTrainData?.delay != 0 && (
(定刻)
)}
見込
{/*
ほげほげふがふが */}
{trainData.map((i, index) => (
))}
);
};
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]));
if (!isNaN(currentTrainData?.delay)) {
dates.add(currentTrainData?.delay, "minute");
}
const timeString = dates.format("HH:mm").split(":");
return (
openStationACFromEachTrainInfo(station)}
key={station}
>
{lineIDs.map((lineID, index) => (
{lineIDs[index]}
{"\n"}
{EachIDs[index]}
))}
{station}
{points && points.findIndex((d) => d == index) >= 0 ? (
🚊
) : null}
{!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
{time}
)}
{timeString[0]}:{timeString[1]}
{se?.replace("発", "出発").replace("着", "到着")}
);
};
const TrainDataView = ({ currentTrainData, currentPosition }) => {
return (
);
};
const StateBox = ({ text, title }) => (
{title}
{text?.match("～") ? (
<>
{text.split("～")[0]}
～
{text.split("～")[1]}
) : (
{text}
)}
);
const boxStyle = {
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
};
const boxTextStyle = {
fontSize: 28,
color: "#0099CC",
textAlign: "right",
};