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";
export default function TrainMenu({
  navigation: { navigate },
  webview,
  stationData,
}) {
  const mapRef = useRef();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <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}')`
                    );
                    navigate("Apps");
                  }}
                ></Marker>
              );
            })
          )}
      </MapView>
      <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>
      <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: 10,
        alignItems: "center",
        margin: 2,
      }}
      onPress={onPressButton}
    >
      <MaterialCommunityIcons name={icon} color="white" size={50} />
      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};