import React, { Ref, useRef, useState,useEffect } from "react";
import { View, Platform, TouchableOpacity, StyleProp, ViewStyle,Linking } from "react-native";
import { WebView } from "react-native-webview";
import Constants from "expo-constants";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
export default function tndView() {
  const webview = useRef<WebView>(null);
    const { navigate, addListener, isFocused } = useNavigation();
  const jsa = `
document.querySelector('.sitettl').style.display = 'none';	
document.querySelector('.attention').style.display = 'none';
document.querySelector('.mapheader').style.display = 'none';
document.querySelector('.map').style.width = '100vw';	   
document.querySelector('.map').style.display = 'block';	 	
document.querySelector('.map').style.marginLeft = '-5px'; 
document.querySelector('.map').style.marginTop = '0px'; 


document.querySelector('.mapbase > img').style.width = '100vw';
document.querySelector('.ml_station > img').style.width = '100vw';

document.querySelector('.ml_seto >img').removeAttribute('width');  
document.querySelector('.ml_seto >img').removeAttribute('height');
document.querySelector('.ml_seto >img').style.width = '14.5vw';
document.querySelector('.ml_seto').style.top = '0.2vw';
document.querySelector('.ml_seto').style.right = '25.8vw';

document.querySelector('.ml_yosan1 >img').removeAttribute('width');  
document.querySelector('.ml_yosan1 >img').removeAttribute('height');
document.querySelector('.ml_yosan1 >img').style.width = '42.6vw';
document.querySelector('.ml_yosan1').style.top = '5.1vw';
document.querySelector('.ml_yosan1').style.left = '18.7vw';

document.querySelector('.ml_yosan2 >img').removeAttribute('width');  
document.querySelector('.ml_yosan2 >img').removeAttribute('height');
document.querySelector('.ml_yosan2 >img').style.width = '12.2vw';
document.querySelector('.ml_yosan2').style.top = '8.6vw';
document.querySelector('.ml_yosan2').style.left = '8.0vw';

document.querySelector('.ml_dosan1 >img').removeAttribute('width');  
document.querySelector('.ml_dosan1 >img').removeAttribute('height');
document.querySelector('.ml_dosan1 >img').style.width = '13.5vw';
document.querySelector('.ml_dosan1').style.top = '6.6vw';
document.querySelector('.ml_dosan1').style.left = '47.8vw';

document.querySelector('.ml_dosan2 >img').removeAttribute('width');  
document.querySelector('.ml_dosan2 >img').removeAttribute('height');
document.querySelector('.ml_dosan2 >img').style.width = '22.5vw';
document.querySelector('.ml_dosan2').style.top = '32vw';
document.querySelector('.ml_dosan2').style.left = '26.5vw';

document.querySelector('.ml_kotoku >img').removeAttribute('width');  
document.querySelector('.ml_kotoku >img').removeAttribute('height');
document.querySelector('.ml_kotoku >img').style.width = '17vw';
document.querySelector('.ml_kotoku').style.top = '6.5vw';
document.querySelector('.ml_kotoku').style.left = '72.9vw';

document.querySelector('.ml_mugi >img').removeAttribute('width');  
document.querySelector('.ml_mugi >img').removeAttribute('height');
document.querySelector('.ml_mugi >img').style.width = '11.6vw';
document.querySelector('.ml_mugi').style.top = '23.6vw';
document.querySelector('.ml_mugi').style.left = '78.3vw';

document.querySelector('.ml_tokushima >img').removeAttribute('width');  
document.querySelector('.ml_tokushima >img').removeAttribute('height');
document.querySelector('.ml_tokushima >img').style.width = '27.8vw';
document.querySelector('.ml_tokushima').style.top = '17vw';
document.querySelector('.ml_tokushima').style.left = '61.3vw';

document.querySelector('.ml_naruto >img').removeAttribute('width');  
document.querySelector('.ml_naruto >img').removeAttribute('height');
document.querySelector('.ml_naruto >img').style.width = '5.5vw';
document.querySelector('.ml_naruto').style.top = '17.1vw';
document.querySelector('.ml_naruto').style.left = '88.5vw';

document.querySelector('.ml_yodo >img').removeAttribute('width');  
document.querySelector('.ml_yodo >img').removeAttribute('height');
document.querySelector('.ml_yodo >img').style.width = '18.3vw';
document.querySelector('.ml_yodo').style.top = '30.2vw';
document.querySelector('.ml_yodo').style.left = '9.6vw';

setInterval(() => {
  document.querySelectorAll('.ml_seto, .ml_yosan1, .ml_yosan2, .ml_dosan1, .ml_dosan2, .ml_kotoku, .ml_mugi, .ml_tokushima, .ml_naruto, .ml_yodo').forEach(el => {
    el.style.visibility = el.style.visibility === 'hidden' ? 'visible' : 'hidden';
  });
}, 1000);
  `;
  const goToTrainMenu = () =>{
        if (Platform.OS === "web") {
          Linking.openURL("https://www.jr-shikoku.co.jp/info/");
          setTimeout(() => {
            // @ts-ignore
            navigate("topMenu", { screen: "menu" });
          }, 100);
    
          return;
        }
  }
    useEffect(() => {
      // @ts-ignore
      const unsubscribe = addListener("tabPress", goToTrainMenu);
      return unsubscribe;
    }, [addListener]);
  
  return (
    <View
      style={{
        backgroundColor: "#309AC3",
        height: "100%",
        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
      }}
    >
      <WebView
        ref={webview}
        source={{ uri: "https://www.jr-shikoku.co.jp/info/" }}
        originWhitelist={["https://www.jr-shikoku.co.jp"]}
        mixedContentMode={"compatibility"}
        javaScriptEnabled={true}
        injectedJavaScript={jsa}
        pullToRefreshEnabled
        onError={() => this.webView?.reload()}
        onMessage={()=>{}}
      />
      <ReloadButton
        onPress={() => webview.current.reload()}
        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
      />
    </View>
  );
}

const ReloadButton = ({ onPress, top, LoadError = false }) => {
  const styles:StyleProp<ViewStyle> = {
    position: "absolute",
    top,
    right: 10,
    width: 50,
    height: 50,
    backgroundColor: LoadError ? "red" : "#0099CC",
    borderColor: "white",
    borderStyle: "solid",
    borderWidth: 1,
    borderRadius: 50,
    alignContent: "center",
    alignSelf: "center",
    alignItems: "center",
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles}>
      <View style={{ flex: 1 }} />
      <Ionicons name="reload" color="white" size={30} />
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};