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";
export const FavoriteList: FC = () => {
  const { favoriteStation } = useFavoriteStation();
  const { webview } = useCurrentTrain();
  const { navigate, addListener, goBack, canGoBack } = useNavigation();
  const { mapsStationData: stationData } = useTrainMenu();

  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
          .filter((d) => d[0].StationMap)
          .map((currentStation) => {
            return (
              <FavoriteListItem
                currentStation={currentStation}
                onPress={() => {
                  const getStationLine = (now) => {
                    const returnData = Object.keys(stationData).filter((d) => {
                      const cache = stationData[d].findIndex(
                        (data) => data.Station_JP == now.Station_JP
                      );
                      return cache != -1;
                    });
                    return returnData[0];
                  };
                  const lineName = getStationLine(currentStation[0]);

                  webview.current?.injectJavaScript(
                    `MoveDisplayStation('${lineName}_${currentStation[0].MyStation}_${currentStation[0].Station_JP}');
                    document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
                  );
                  goBack();
                  if (canGoBack()) goBack();
                }}
              >
                <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>
  );
};