jrshikoku/components/StationDiagram/ExGridViewItem.tsx

import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
import { getStringConfig, typeID } from "@/lib/getStringConfig";
import { getTrainType } from "@/lib/getTrainType";
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
import { FC, useEffect, useMemo, useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  useWindowDimensions,
} from "react-native";
import { customTrainDataDetector } from "../custom-train-data";
import dayjs from "dayjs";
import { SheetManager } from "react-native-actions-sheet";
import { useNavigation } from "@react-navigation/native";
import { lineList } from "@/lib/getStationList";
import { useStationList } from "@/stateBox/useStationList";

export const ExGridViewItem: FC<{
  d: {
    trainNumber: string;
    array: string;
    name: string;
    type: string;
    time: string;
  };
  index: number;
}> = ({ d, index }) => {
  const { allCustomTrainData } = useAllTrainDiagram();
  const { navigate, goBack } = useNavigation();
  const [trainData, setTrainData] = useState<{
    ToData: string;
    TrainNumber: string;
    id: string;
    img: string;
    info?: string;
    infoUrl: string;
    infogram: string;
    isEdit: boolean;
    isSeason: boolean;
    trainName: string;
    trainNumDistance?: number;
    type: typeID;
    viaData?: string;
    uwasa?: string;
  }>();
  useEffect(() => {
    if (allCustomTrainData) {
      allCustomTrainData.forEach((x) => {
        if (x.TrainNumber === d.trainNumber) {
          setTrainData(x);
        }
      });
    }
  }, []);
  const { width } = useWindowDimensions();
  const { color, name, data } = getTrainType(trainData?.type, true);
  const { originalStationList } = useStationList();
  // 列車名、種別、フォントの取得
  const [
    typeString,
    trainName,
    fontAvailable,
    isOneMan,
    infogram,
    isEdit,
    uwasa,
    vehicleFormation,
    trainInfoUrl,
  ] = useMemo(() => {
    const {
      type,
      trainName,
      trainNumDistance,
      infogram,
      isEdit,
      uwasa,
      vehicleFormation,
      trainInfoUrl,
    } = customTrainDataDetector(d.trainNumber, allCustomTrainData);
    const [typeString, fontAvailable, isOneMan] = getStringConfig(
      type,
      d.trainNumber
    );
    const trainData = d.array.split("#").filter((d) => d !== "");
    switch (true) {
      case trainData[trainData.length - 1] === undefined:
        return [
          typeString,
          "",
          fontAvailable,
          isOneMan,
          infogram,
          isEdit,
          uwasa,
          vehicleFormation,
          trainInfoUrl,
        ];
      default:
        // 行先がある場合は、行先を取得
        return [
          typeString,
          migrateTrainName(
            trainData[trainData.length - 1].split(",")[0] + "行"
          ),
          fontAvailable,
          isOneMan,
          infogram,
          isEdit,
          uwasa,
          vehicleFormation,
          trainInfoUrl,
        ];
    }
  }, [d.array]);
  const timeArray = d.time.split(":").map((s) => parseInt(s));
  const formattedTime = dayjs()
    .set("hour", timeArray[0])
    .set("minute", timeArray[1])
    .format("m");

  const openStationACFromEachTrainInfo = async (stationName) => {
    await SheetManager.hide("EachTrainInfo");
    const findStationEachLine = (selectLine) => {
      let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
      return NearStation;
    };
    let returnDataBase = lineList
      .map((d) => findStationEachLine(originalStationList[d]))
      .filter((d) => d.length > 0)
      .reduce((pre, current) => {
        pre.push(...current);
        return pre;
      }, []);
    if (returnDataBase.length) {
      const payload = {
        currentStation: returnDataBase,
        navigate,
        //@ts-ignore
        useShow: () => SheetManager.show("StationDetailView", { payload }),
        onExit: () => SheetManager.hide("StationDetailView"),
      }; //@ts-ignore
      setTimeout(() => SheetManager.show("StationDetailView", { payload }), 50);
    } else {
      SheetManager.hide("StationDetailView");
    }
  };
  const openTrainInfo = () => {
    let TrainNumber = "";
    if (trainData.trainNumDistance != undefined) {
      const timeInfo =
        parseInt(trainData.TrainNumber.replace("M", "").replace("D", "")) -
        trainData.trainNumDistance;
      TrainNumber = timeInfo + "号";
    }
    const payload = {
      data: {
        trainNum: trainData.TrainNumber,
        limited: `${data}:${trainData.trainName}${TrainNumber}`,
      },
      navigate,
      openStationACFromEachTrainInfo,
      from: "AllTrainIDList",
    };
    SheetManager.show("EachTrainInfo", {
      //@ts-ignore
      payload,
      onClose: (data) => {
        //alert(data);
      },
    });
  };
  // if(typeString == "回送"){
  //   return<></>;
  // }
  return (
    <View style={{ left: 0, height: 50 }}>
      <TouchableOpacity
        style={{
          flexDirection: "column",
          borderTopWidth: 1,
          borderBottomWidth: 0.5,
          borderStyle: "solid",
          borderColor: "darkgray",
          opacity: d.type.includes("通") ? 0.5 : 1,
          position: "absolute",
          left: ((((width-50) / 100) * parseInt(formattedTime)) / 60) * 100,
          height: "100%",
        }}
        onPress={() => openTrainInfo()}
      >
        <View style={{ position: "relative" }}>
          <Text style={{ fontSize: 20, color: color }}>{formattedTime}</Text>
          <Text
            style={{
              fontSize: 10,
              position: "absolute",
              bottom: -3,
              right: 0,
              fontWeight: "bold",
            }}
          >
            {d.type}
          </Text>
        </View>
        <View style={{ flex: 1, flexDirection: "column" }}>
          <Text
            style={{
              fontSize: 10,
              flex: 1,
              fontWeight: "bold",
            }}
          >
            {trainName}
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};