jrshikoku/components/trainMenu.js

import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
import { View, Text, TouchableOpacity, Linking } from "react-native";
import MapView from "react-native-maps";
import { useCurrentTrain } from "../stateBox/useCurrentTrain";
import { useNavigation } from "@react-navigation/native";
import lineColorList from "../assets/originData/lineColorList";
import { stationIDPair } from "../lib/getStationList2";
import { lineListPair } from "../lib/getStationList";
import { SheetManager } from "react-native-actions-sheet";
import { useTrainMenu } from "../stateBox/useTrainMenu";
import { MapPin } from "./TrainMenu/MapPin";
import { UsefulBox } from "./TrainMenu/UsefulBox";
import { MapsButton } from "./TrainMenu/MapsButton";
export default function TrainMenu({ style }) {
  const { webview } = useCurrentTrain();
  const mapRef = useRef();
  const { navigate, goBack } = useNavigation();
  const [stationPin, setStationPin] = useState([]);
  const {
    selectedLine,
    setSelectedLine,
    injectJavaScript,
    setInjectJavaScript,
    mapsStationData: stationData,
  } = useTrainMenu();
  useEffect(() => {
    const stationPinData = [];
    Object.keys(stationData).forEach((d, indexBase) => {
      stationData[d].forEach((D, index) => {
        if (!D.StationMap) return null;
        if (selectedLine && selectedLine != d) return;
        const latlng = D.StationMap.replace(
          "https://www.google.co.jp/maps/place/",
          ""
        ).split(",");
        if (latlng.length == 0) return null;
        stationPinData.push({ D, d, latlng, indexBase: 0, index });
      });
    });
    setStationPin(stationPinData);
  }, [stationData, selectedLine]);
  useLayoutEffect(() => {
    mapRef.current.fitToCoordinates(
      stationPin.map(({ latlng }) => ({
        latitude: parseFloat(latlng[0]),
        longitude: parseFloat(latlng[1]),
      })),
      { edgePadding: { top: 80, bottom: 120, left: 50, right: 50 } } // Add margin values here
    );
  }, [stationPin]);
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
      <MapView
        style={{ flex: 1, width: "100%", height: "100%" }}
        showsUserLocation={true}
        loadingEnabled={true}
        showsMyLocationButton={false}
        moveOnMarkerPress={false}
        showsCompass={false}
        ref={mapRef}
        //provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 33.774519,
          longitude: 133.533306,
          latitudeDelta: 1.8, //小さくなるほどズーム
          longitudeDelta: 1.8,
        }}
      >
        {stationPin.map(({ D, d, latlng, indexBase, index }) => (
          <MapPin
            index={index}
            indexBase={indexBase}
            latlng={latlng}
            D={D}
            d={d}
            navigate={navigate}
            webview={webview}
            key={D.StationNumber + d}
          />
        ))}
      </MapView>
      <View style={{ position: "relative" }}>
        <View
          style={{
            flexDirection: "row",
            position: "absolute",
            width: "100vw",
            bottom: 0,
            flex: 1,
          }}
        >
          <TouchableOpacity
            style={{
              backgroundColor: selectedLine
                ? lineColorList[stationIDPair[selectedLine]]
                : "#0099CC",
              padding: 10,
              zIndex: 1,
              alignItems: "center",
              position: "absolute",
              bottom: 0,
              width: "100%",
              paddingBottom: 50,
            }}
            onPress={() => SheetManager.show("TrainMenuLineSelector")}
          >
            <Text
              style={{
                color: "white",
                fontWeight: "bold",
                fontSize: 10,
                textAlign: "center",
              }}
            >
              ▲　　ここを押して路線をフィルタリングできます　　▲
            </Text>
            <Text
              style={{
                color: "white",
                fontWeight: "bold",
                fontSize: 20,
                textAlign: "center",
              }}
            >
              {selectedLine
                ? lineListPair[stationIDPair[selectedLine]]
                : "JR四国　対象全駅"}
            </Text>
          </TouchableOpacity>
          <Text style={{ position: "absolute", bottom: 40 }}>
            路線記号からフィルタリング
          </Text>
          {Object.keys(stationData).map((d) => (
            <TouchableOpacity
              style={{
                flex: 1,
                backgroundColor: lineColorList[stationIDPair[d]],
                padding: 5,
                margin: 2,
                borderRadius: 10,
                borderColor: "white",
                borderWidth: 1,
                borderStyle: "solid",
                alignItems: "center",
                opacity: selectedLine == d ? 1 : !selectedLine ? 1 : 0.5,
                zIndex: 10,
              }}
              onPress={() => {
                const s = selectedLine == d ? undefined : d;
                if(!s) return;
                setSelectedLine(s);
                Object.keys(stationData).forEach((data, indexBase) => {
                  stationData[data].forEach((D, index) => {
                    if (!D.StationMap) return null;
                    if (s && s != data) return;
                    const latlng = D.StationMap.replace(
                      "https://www.google.co.jp/maps/place/",
                      ""
                    ).split(",");
                    if (latlng.length == 0) return null;
                    if (index == 0 && stationPin.length > 0) {
                      webview.current
                        ?.injectJavaScript(`MoveDisplayStation('${data}_${D.MyStation}_${D.Station_JP}');
                          document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`);
                    }
                  });
                });
              }}
            >
              <Text
                style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
              >
                {stationIDPair[d]}
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>
      {navigate && (
        <View style={{ flexDirection: "row" }}>
          <UsefulBox
            backgroundColor={"#F89038"}
            icon="train-car"
            flex={1}
            onPressButton={() =>
              navigate("howto", {
                info: "https://train.jr-shikoku.co.jp/usage.htm",
              })
            }
          >
            使い方
          </UsefulBox>
          <UsefulBox
            backgroundColor={"#EA4752"}
            icon="star"
            flex={1}
            onPressButton={() => navigate("favoriteList")}
          >
            お気に入り
          </UsefulBox>
          <UsefulBox
            backgroundColor={"#91C31F"}
            icon="clipboard-list-outline"
            flex={1}
            onPressButton={() =>
              Linking.openURL(
                "https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
              )
            }
          >
            フィードバック
          </UsefulBox>
        </View>
      )}
      <MapsButton
        onPress={() => {
          goBack();
          webview.current?.injectJavaScript(injectJavaScript);
        }}
        top={0}
        mapSwitch={"flex"}
      />
    </View>
  );
}