import React, { useRef, useState, useEffect } 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";
import lineColorList from "../assets/originData/lineColorList";
import { stationIDPair } from "../lib/getStationList2";
import { lineListPair } from "../lib/getStationList";
export default function TrainMenu({ stationData, style }) {
  const { webview } = useCurrentTrain();
  const mapRef = useRef();
  const { navigate } = useNavigation();
  const [stationPin, setStationPin] = useState([]);
  const [selectedLine, setSelectedLine] = useState(undefined);
  useEffect(() => {
    const stationPinData = [];
    Object.keys(stationData).map((d, indexBase) =>
      stationData[d].map((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]);
  useEffect(() => {
    mapRef.current.fitToCoordinates(
      stationPin.map(({ latlng }) => ({
        latitude: parseFloat(latlng[0]),
        longitude: parseFloat(latlng[1]),
      })),
      { edgePadding: { top: 100, bottom: 50, left: 50, right: 50 } } // Add margin values here
    );
  }, [stationPin]);
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
      {selectedLine && (
        <View
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            backgroundColor: lineColorList[stationIDPair[selectedLine]],
            padding: 10,
            zIndex: 100,
            alignItems: "center",
          }}
        >
          <Text
            style={{
              color: "white",
              fontWeight: "bold",
              fontSize: 20,
              textAlign: "center",
            }}
          >
            {selectedLine ? lineListPair[stationIDPair[selectedLine]] : "全線"}
          </Text>
        </View>
      )}

      <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={index + indexBase}
          />
        ))}
      </MapView>
      <View style={{ position: "relative" }}>
        <View
          style={{
            flexDirection: "row",
            position: "absolute",
            width: "100vw",
            bottom: 0,
            flex: 1,
          }}
        >
          <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,
                alignItems: "center",
                opacity: selectedLine == d ? 1 : !selectedLine ? 1 : 0.5,
              }}
              onPress={() => setSelectedLine(selectedLine == d ? undefined : d)}
            >
              <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>
      )}
      {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>
  );
};

const MapPin = ({ index, indexBase, latlng, D, d, navigate, webview }) => {
  return (
    <Marker
      key={index + indexBase}
      coordinate={{
        latitude: parseFloat(latlng[0]),
        longitude: parseFloat(latlng[1]),
      }}
      onPress={() => {
        webview.current?.injectJavaScript(
          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
          document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
        );
        if (navigate) navigate("Apps");
      }}
    ></Marker>
  );
};