import React from "react";
import { StatusBar, Platform, View } from "react-native";
import { WebView } from "react-native-webview";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { BigButton } from "./atom/BigButton";

export default function TrainBase({ route }) {
  if (!route.params) {
    return null;
  }
  const { info } = route.params;
  const { goBack } = useNavigation();
  const jss = `
  document.getElementById('Footer').style.display = 'none';
  ${
    Platform.OS == "ios"
      ? `document.getElementsByTagName("html")[0].style['font-size'] = '11px';`
      : ""
  }
  true;`;
  return (
    <View style={{ height: "100%" }}>
      {Platform.OS == "ios" && <StatusBar barStyle="dark-content" />}
      <WebView
        useWebKit
        source={{ uri: "https://train.jr-shikoku.co.jp/" + info }}
        originWhitelist={[
          "https://train.jr-shikoku.co.jp",
          "https://train.jr-shikoku.co.jp/sp.html",
        ]}
        onMessage={(event) => {}}
        mixedContentMode={"compatibility"}
        javaScriptEnabled
        injectedJavaScript={jss}
        setSupportMultipleWindows
      />
      <BigButton
        style={{ borderColor: "black" }}
        tS={{ color: "black" }}
        string="閉じる"
        onPress={goBack}
      >
        <MaterialCommunityIcons name="close" color="black" size={30} />
      </BigButton>
    </View>
  );
}