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 jsa = `
  document.querySelector('.sitettl').style.display = 'none';	
  document.querySelector('.attention').style.display = 'none';
  `;
  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={() => this.webView?.reload()}
      />
      <ReloadButton
        onPress={() => webview.current?.reload()}
        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
      />
    </View>
  );
}

const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
  const styles = {
    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,
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles}>
      <View style={{ flex: 1 }} />
      <Ionicons name="reload" color="white" size={30} />
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};