import React, { useEffect, useRef, useState } from "react";
import {
  View,
  Platform,
  ToastAndroid,
  Text,
  TouchableOpacity,
} from "react-native";
import { WebView } from "react-native-webview";
import Constants from "expo-constants";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { news } from "./config/newsUpdate";
import { getStationList } from "./lib/getStationList";
import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
import { injectJavascriptData } from "./lib/webViewInjectjavascript";
import { getStationList2 } from "./lib/getStationList2";
/* 
import StatusbarDetect from './StatusbarDetect';
var Status = StatusbarDetect(); */

export default function Apps(props) {
  const {
    navigation: { navigate },
  } = props;
  var urlcache = "";
  const webview = useRef();
  //画面表示関連
  const [iconSetting, setIconSetting] = useState(undefined);
  const [mapSwitch, setMapSwitch] = useState(undefined);
  const [stationMenu, setStationMenu] = useState(undefined);

  //地図用
  const [mapsStationData, setMapsStationData] = useState(undefined);
  useEffect(() => {
    getStationList2().then((data) => {
      console.log(data);
      setMapsStationData(data);
    });
  }, []);

  //駅情報画面用
  const StationBoardAcSR = useRef(null);
  const [stationBoardData, setStationBoardData] = useState(undefined);
  const [originalStationList, setOriginalStationList] = useState();
  const [selectedStation, setSelectedStation] = useState(undefined);
  useEffect(() => getStationList().then(setOriginalStationList), []);

  //地図表示テキスト
  const injectJavascript = injectJavascriptData(
    mapSwitch,
    iconSetting,
    stationMenu
  );

  useEffect(() => {
    //ニュース表示
    AsyncStorage.getItem("status")
      .then((d) => {
        if (d != news) navigate("news");
      })
      .catch((e) => navigate("news"));

    //列車アイコンスイッチ
    AsyncStorage.getItem("iconSwitch")
      .then((d) => {
        if (d) {
          setIconSetting(d);
        } else {
          AsyncStorage.setItem("iconSwitch", "true").then(() =>
            Updates.reloadAsync()
          );
        }
      })
      .catch((d) =>
        AsyncStorage.setItem("iconSwitch", "true").then(() =>
          Updates.reloadAsync()
        )
      );

    //地図スイッチ
    AsyncStorage.getItem("mapSwitch")
      .then((d) => {
        if (d) {
          setMapSwitch(d);
        } else {
          AsyncStorage.setItem("mapSwitch", "false").then(() =>
            Updates.reloadAsync()
          );
        }
      })
      .catch((d) =>
        AsyncStorage.setItem("mapSwitch", "false").then(() =>
          Updates.reloadAsync()
        )
      );
    //駅メニュースイッチ
    AsyncStorage.getItem("stationSwitch")
      .then((d) => {
        if (d) {
          setStationMenu(d);
        } else {
          AsyncStorage.setItem("stationSwitch", "true").then(() =>
            Updates.reloadAsync()
          );
        }
      })
      .catch((d) =>
        AsyncStorage.setItem("stationSwitch", "true").then(() =>
          Updates.reloadAsync()
        )
      );
  }, []);

  return (
    <View
      style={{
        height: "100%",
        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
      }}
    >
      {/* {Status} */}
      <WebView
        useWebKit={true}
        ref={webview}
        source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
        originWhitelist={[
          "https://train.jr-shikoku.co.jp",
          "https://train.jr-shikoku.co.jp/sp.html",
        ]}
        mixedContentMode={"compatibility"}
        javaScriptEnabled={true}
        allowsBackForwardNavigationGestures={true}
        setSupportMultipleWindows={true}
        onNavigationStateChange={(event) => {
          if (event.url != urlcache) {
            //URL二重判定回避
            urlcache = event.url;

            if (
              event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
            ) {
              if (Platform.OS === "android") navigate("howto");
              webview?.current.goBack();
              //Actions.howto();
            } else if (
              event.url.includes("https://train.jr-shikoku.co.jp/train.html")
            ) {
              //Actions.trainbase({info: event.url});
              if (Platform.OS === "android")
                navigate("trainbase", { info: event.url });
              webview?.current.goBack();
            }
          }
        }}
        onMessage={(event) => {
          if (!originalStationList) {
            alert("駅名標データを取得中...");
            return;
          }
          if (event.nativeEvent.data.includes("PopUpMenu")) {
            const selectedStationPDFAddress = event.nativeEvent.data
              .split(",")[3]
              .replace("'", "")
              .replace("'", "");

            const findStationEachLine = (selectLine) => {
              let NearStation = selectLine.filter(
                (d) => d.StationTimeTable == selectedStationPDFAddress
              );
              return NearStation;
            };

            const lineList = [
              "予讃線",
              "松宇線",
              "伊予灘線",
              "土讃線",
              "窪川線",
              "高徳線",
              "徳島線",
              "鳴門線",
              "瀬戸大橋線",
            ];
            let returnDataBase = lineList
              .map((d) => findStationEachLine(originalStationList[d]))
              .filter((d) => d.length > 0)
              .reduce((pre, current) => {
                pre.push(...current);
                return pre;
              }, []);
            if (returnDataBase.length) {
              let currentStation =
                currentStation == undefined ? [] : currentStation;
              setStationBoardData(returnDataBase);
              StationBoardAcSR.current?.setModalVisible();
            } else {
              setStationBoardData(undefined);
              StationBoardAcSR.current?.hide();
            }

            return;
          }
          navigate("trainbase", { info: event.nativeEvent.data });
        }}
        injectedJavaScript={injectJavascript}
        onTouchMove={() => StationBoardAcSR.current?.hide()}
      />
      <TouchableOpacity
        onPress={() =>
          navigate("trainMenu", { webview, stationData: mapsStationData })
        }
        style={{
          position: "absolute",
          top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
          left: 10,
          width: 50,
          height: 50,
          backgroundColor: "#0099CC",
          borderColor: "white",
          borderStyle: "solid",
          borderWidth: 1,
          borderRadius: 50,
          alignContent: "center",
          alignSelf: "center",
          alignItems: "center",
          display: mapSwitch == "true" ? "flex" : "none",
        }}
      >
        <View style={{ flex: 1 }} />
        <Text
          style={{
            textAlign: "center",
            width: "auto",
            height: "auto",
            textAlignVertical: "center",
            fontWeight: "bold",
            color: "white",
          }}
        >
          三
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>

      <StationDeteilView
        StationBoardAcSR={StationBoardAcSR}
        currentStation={stationBoardData}
        originalStationList={originalStationList}
      />
    </View>
  );
}