import React from "react";
import { View, Text, TouchableOpacity, 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 { FavoriteListItem } from "./atom/FavoriteListItem";
export default function FavoriteList({ stationData }) {
  const { favoriteStation } = useFavoriteStation();
  const { webview } = useCurrentTrain();
  const { navigate, goBack } = useNavigation();

  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 />");`
                  );
                  navigate("Apps");
                }}
              >
                <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>
      <TouchableOpacity
        style={{
          padding: 10,
          flexDirection: "row",
          borderColor: "white",
          borderWidth: 1,
          margin: 10,
          borderRadius: 5,
          alignItems: "center",
        }}
        onPress={() => goBack()}
      >
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
          閉じる
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>
    </View>
  );
}