import React, { Component, useRef } from "react";
import {
  StatusBar,
  Platform,
  View,
  TouchableOpacity,
  Text,
} from "react-native";
import { WebView } from "react-native-webview";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";

export default function TrainBase({ route, navigation }) {
  const { info, from } = route.params;
  const { navigate } = navigation;
  console.log(info);
  const webview = useRef();
  const jss = `document.getElementById('Footer').style.display = 'none';
  ${
    Platform.OS == "ios" &&
    `document.getElementsByTagName("html")[0].style['font-size'] = '11px';`
  }`;
  //const jss = `alert("ほげ")`;
  return (
    <View style={{ height: "100%" }}>
      {Platform.OS == "ios" && <StatusBar barStyle="dark-content" />}
      <WebView
        //useWebKit={true}
        ref={webview}
        source={{ uri: "https://train.jr-shikoku.co.jp/" + info }}
        originWhitelist={[
          "https://train.jr-shikoku.co.jp",
          "https://train.jr-shikoku.co.jp/sp.html",
        ]}
        mixedContentMode={"compatibility"}
        javaScriptEnabled={true}
        injectedJavaScript={jss}
        setSupportMultipleWindows={false}
        onMessage={(event) => {}}
      />
      {from == "LED" && (
        <TouchableOpacity
          style={{
            padding: 10,
            flexDirection: "row",
            borderColor: "black",
            borderWidth: 1,
            margin: 10,
            borderRadius: 5,
            alignItems: "center",
          }}
          onPress={() => navigate("menu")}
        >
          <View style={{ flex: 1 }} />
          <MaterialCommunityIcons name="close" color="black" size={30} />
          <Text style={{ fontSize: 25, fontWeight: "bold", color: "black" }}>
            閉じる
          </Text>
          <View style={{ flex: 1 }} />
        </TouchableOpacity>
      )}
    </View>
  );
}