import React, { useRef } from "react";
import { View, Text, TouchableOpacity, Linking } from "react-native";
import MapView, { Marker } from "react-native-maps";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useCurrentTrain } from "../stateBox/useCurrentTrain";
import { useNavigation } from "@react-navigation/native";
export default function TrainMenu({ stationData, style }) {
  const { webview } = useCurrentTrain();
  const mapRef = useRef();
  const { navigate } = useNavigation();
  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,
        }}
      >
        {stationData &&
          Object.keys(stationData).map((d) =>
            stationData[d].map((D, index) => {
              if (!D.StationMap) return null;
              const latlng = D.StationMap.replace(
                "https://www.google.co.jp/maps/place/",
                ""
              ).split(",");
              if (latlng.length == 0) return null;
              return (
                <Marker
                  key={index}
                  coordinate={{
                    latitude: parseFloat(latlng[0]),
                    longitude: parseFloat(latlng[1]),
                  }}
                  onPress={() => {
                    webview.current?.injectJavaScript(
                      `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
                    );
                    if (navigate) navigate("Apps");
                  }}
                ></Marker>
              );
            })
          )}
      </MapView>
      {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>
      )}
      {navigate && (
        <TouchableOpacity
          style={{
            padding: 10,
            flexDirection: "row",
            borderColor: "white",
            borderWidth: 1,
            margin: 10,
            borderRadius: 5,
            alignItems: "center",
          }}
          onPress={() => navigate("Apps")}
        >
          <View style={{ flex: 1 }} />
          <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
            閉じる
          </Text>
          <View style={{ flex: 1 }} />
        </TouchableOpacity>
      )}
    </View>
  );
}
const UsefulBox = (props) => {
  const { icon, backgroundColor, flex, onPressButton, children } = props;
  return (
    <TouchableOpacity
      style={{
        flex: flex,
        backgroundColor: backgroundColor,
        padding: 5,
        alignItems: "center",
        margin: 2,
      }}
      onPress={onPressButton}
    >
      <MaterialCommunityIcons name={icon} color="white" size={50} />
      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};