import React from "react";
import { View, Text, TouchableOpacity, useWindowDimensions, Platform } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import * as Updates from "expo-updates";
import Constants from "expo-constants";
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";

const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
export const NewMenu = ({ LoadError }) => {
    const { webview } = useCurrentTrain();
    const { width } = useWindowDimensions();
    return (
      <View
        style={{
          position: "absolute",
          top,
          width,
          height: 54,
          backgroundColor: "#0099CC",
          borderColor: "white",
          borderStyle: "solid",
          borderWidth: 1,
          alignContent: "center",
          alignSelf: "center",
          alignItems: "center",
          flexDirection: "row",
        }}
      >
        <TouchableOpacity
          activeOpacity={1}
          style={{
            flex: 1,
            height: 54,
            backgroundColor: "#0099CC",
            borderColor: "white",
            borderStyle: "solid",
            borderWidth: 1,
            borderRightWidth: 0,
            alignContent: "center",
            alignSelf: "center",
            alignItems: "center",
            flexDirection: "row",
          }}
          onPress={() => {
            webview.current?.injectJavaScript(`AccordionClassEvent()`);
          }}
        >
          <>
            <View
              style={{
                width: 54,
                height: 54,
                backgroundColor: "#0099CC",
                borderColor: "white",
                borderStyle: "solid",
                borderWidth: 1,
                alignContent: "center",
                alignSelf: "center",
                alignItems: "center",
              }}
            >
              <View style={{ flex: 1 }} />
              <Ionicons name="menu" color="white" size={30} />
              <View style={{ flex: 1 }} />
            </View>
            <View style={{ flex: 1 }} />
            <Text style={{ color: "white", fontSize: 20 }}>メニュー</Text>
            <View style={{ flex: 1 }}></View>
          </>
        </TouchableOpacity>
  
        <TouchableOpacity
          onPress={() => Updates.reloadAsync()}
          style={{
            width: 54,
            height: 54,
            backgroundColor: LoadError ? "red" : "#0099CC",
            borderColor: "white",
            borderStyle: "solid",
            borderWidth: 1,
            alignContent: "center",
            alignSelf: "center",
            alignItems: "center",
          }}
        >
          <View style={{ flex: 1 }} />
          <Ionicons name="reload" color="white" size={30} />
          <View style={{ flex: 1 }} />
        </TouchableOpacity>
      </View>
    );
  };