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('.pageInformation h1.accent span').style.width = '100%';
document.querySelector('.delay_status').style.width = 'calc(100vw - 4px)';
document.querySelector('.reload').style.width = '100vw';
document.querySelector('.delay_info').style.width = '100vw';
document.querySelector('.related_lnk').style.width = '100%';
document.querySelector('.related_lnk').style.padding = '0px';
document.querySelector('.related_lnk .ttl').style.padding = '20px';
document.querySelector('.related_lnk dl.lnk_item').style.float = 'none';
document.querySelector('.related_lnk dl.lnk_item').style.overflow = 'visible';
document.querySelector('.related_lnk dl.lnk_item').style.width = '100%';
document.querySelectorAll('.attention').forEach((el) => {
  el.style.width = '100vw';
});


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={() => webview.current?.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>
  );
};
