import React, { useRef, useState } from "react";
import { View, Platform, TouchableOpacity } from "react-native";
import { WebView } from "react-native-webview";
import Constants from "expo-constants";
import { Ionicons } from "@expo/vector-icons";
export default function tndView() {
  const webview = useRef();
  const [LoadError, setLoadError] = useState(false);
  return (
    <View
      style={{
        backgroundColor: "#309AC3",
        height: "100%",
        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
      }}
    >
      <WebView
        useWebKit={true}
        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={(syntheticEvent) => {
          //webViewの再読み込みを行う
          this.webView.reload();
        }}
      />
      <ReloadButton
        onPress={() => webview.current.reload()}
        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
        LoadError={LoadError}
      />
    </View>
  );
}
const jsa = `
document.querySelector('.sitettl').style.display = 'none';	
document.querySelector('.attention').style.display = 'none';
`;

const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
  const styles = {
    touch: {
      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",
      display: mapSwitch,
    },
    text: {
      textAlign: "center",
      width: "auto",
      height: "auto",
      textAlignVertical: "center",
      fontWeight: "bold",
      color: "white",
    },
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles.touch}>
      <View style={{ flex: 1 }} />
      <Ionicons name="reload" color="white" size={30} />
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};