import React, { FC, useEffect } from "react";
import { View, Text, ScrollView } from "react-native";

import Icon from "react-native-vector-icons/Entypo";
import { useFavoriteStation } from "../stateBox/useFavoriteStation";
import { useCurrentTrain } from "../stateBox/useCurrentTrain";
import { useNavigation } from "@react-navigation/native";
import { useTrainMenu } from "../stateBox/useTrainMenu";
import { FavoriteListItem } from "./atom/FavoriteListItem";
import { BigButton } from "./atom/BigButton";
import { useStationList } from "@/stateBox/useStationList";
export const FavoriteList: FC = () => {
  const { favoriteStation } = useFavoriteStation();
  const { webview } = useCurrentTrain();
  const { navigate, addListener, goBack, canGoBack } = useNavigation();
  const { mapsStationData: stationData } = useTrainMenu();
  const { getInjectJavascriptAddress } = useStationList();

  useEffect(() => {
    const unsubscribe = addListener("tabPress", goToTrainMenu);
    return unsubscribe;
  }, [{ navigate, addListener }]);

  const goToTrainMenu = (e) => {
    e.preventDefault();
    goBack();
  };
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <Text
        style={{
          textAlign: "center",
          fontSize: 20,
          color: "white",
          fontWeight: "bold",
          paddingVertical: 10,
        }}
      >
        位置情報クイック移動メニュー
      </Text>
      <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
        {favoriteStation
          .map((currentStation) => {
            return (
              <FavoriteListItem
                currentStation={currentStation}
                onPress={() => {
                  const scriptString = getInjectJavascriptAddress(
                    currentStation[0].StationNumber
                  );
                  if (!scriptString) return;
                  webview.current?.injectJavaScript(scriptString);
                  goBack();
                  if (canGoBack()) goBack();
                }}
                key={currentStation[0].StationNumber + "FavoriteList"}
              >
                <View
                  style={{
                    flex: 2,
                    flexDirection: "row",
                    alignContent: "center",
                    alignItems: "center",
                    marginVertical: 4,
                  }}
                >
                  <View style={{ flex: 1 }} />
                  <Text style={{ fontSize: 20 }}>移動する</Text>
                  <Icon name="chevron-right" size={20} />
                </View>
              </FavoriteListItem>
            );
          })}
      </ScrollView>
      <Text
        style={{
          backgroundColor: "white",
          borderWidth: 1,
          borderStyle: "solid",
        }}
      >
        お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
      </Text>
      <BigButton onPress={() => goBack()} string="閉じる" />
    </View>
  );
};