import React from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { ListItem } from "native-base";
import Icon from "react-native-vector-icons/Entypo";
import { useFavoriteStation } from "../stateBox/useFavoriteStation";
export default function FavoriteList({ navigation, webview, stationData }) {
  const { navigate } = navigation;
  const { favoriteStation } = useFavoriteStation();

  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <Text
        style={{
          textAlign: "center",
          fontSize: 25,
          color: "white",
          fontWeight: "bold",
          paddingVertical: 10,
        }}
      >
        位置情報クイック移動メニュー
      </Text>
      <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
        {favoriteStation
          .filter((d) => d[0].StationMap)
          .map((currentStation) => {
            return (
              <ListItem
                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}')`
                  );
                  navigate("Apps");
                }}
              >
                <Text style={{ fontSize: 20, flex: 2 }}>
                  {currentStation
                    .map((d) => d.StationNumber)
                    .filter((d) => d !== null)
                    .join("/")}
                </Text>
                <Text style={{ fontSize: 20, flex: 3 }}>
                  {currentStation[0].Station_JP}
                </Text>
                <View
                  style={{
                    flex: 2,
                    flexDirection: "row",
                    alignContent: "center",
                    alignItems: "center",
                  }}
                >
                  <View style={{ flex: 1 }} />
                  <Text style={{ fontSize: 20 }}>移動する</Text>
                  <Icon name="chevron-right" size={20} />
                </View>
              </ListItem>
            );
          })}
      </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={() => navigation.goBack()}
      >
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
          閉じる
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>
    </View>
  );
}