import React from "react";
import {
  View,
  Platform,
  useWindowDimensions,
  LayoutAnimation,
} from "react-native";
import Constants from "expo-constants";
import * as Updates from "expo-updates";

import { lineList } from "../lib/getStationList";
import { useCurrentTrain } from "../stateBox/useCurrentTrain";
import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange";
import { SheetManager } from "react-native-actions-sheet";
import TrainMenu from "../components/trainMenu";
import { EachTrainInfoCore } from "../components/ActionSheetComponents/EachTrainInfoCore";

import { useNavigation } from "@react-navigation/native";
import { useTrainMenu } from "../stateBox/useTrainMenu";
import { AppsWebView } from "./Apps/WebView";
import { NewMenu } from "./Apps/NewMenu";
import { MapsButton } from "./Apps/MapsButton";
import { ReloadButton } from "./Apps/ReloadButton";
import { LandscapeBackButton } from "./Apps/LandscapeBackButton";
import { useStationList } from "../stateBox/useStationList";
/* 
import StatusbarDetect from '../StatusbarDetect';
var Status = StatusbarDetect(); */

const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;

export default function Apps() {
  const { webview } = useCurrentTrain();
  const { height, width } = useWindowDimensions();
  const { navigate } = useNavigation();
  const { isLandscape } = useDeviceOrientationChange();
  const handleLayout = () => {};
  const { originalStationList } = useStationList();
  const { setInjectJavaScript, mapSwitch, trainInfo, setTrainInfo } =
    useTrainMenu();

  const openStationACFromEachTrainInfo = async (stationName) => {
    await SheetManager.hide("EachTrainInfo");
    const findStationEachLine = (selectLine) => {
      let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
      return NearStation;
    };
    let returnDataBase = lineList
      .map((d) => findStationEachLine(originalStationList[d]))
      .filter((d) => d.length > 0)
      .reduce((pre, current) => {
        pre.push(...current);
        return pre;
      }, []);
    if (returnDataBase.length) {
      const payload = {
        currentStation: returnDataBase,
        navigate,
        goTo: "Apps",
        useShow: () => SheetManager.show("StationDetailView", { payload }),
        onExit: () => SheetManager.hide("StationDetailView"),
      };
      setTimeout(()=>SheetManager.show("StationDetailView", { payload }),50);
    } else {
      SheetManager.hide("StationDetailView");
    }
  };
  return (
    <View
      style={{
        height: "100%",
        paddingTop: top,
        flexDirection: isLandscape ? "row" : "column",
      }}
      onLayout={handleLayout}
    >
      {!trainInfo.trainNum && isLandscape ? (
        <TrainMenu
          style={{
            width: (width / 100) * 40,
            height: "100%",
            flexDirection: "column-reverse",
          }}
        />
      ) : null}
      {/* {Status} */}
      <AppsWebView
        {...{
          openStationACFromEachTrainInfo,
        }}
      />
      {isLandscape && trainInfo.trainNum && (
        <View
          style={{
            width: (width / 100) * 40,
            height: height,
            flexDirection: "column",
          }}
        >
          <EachTrainInfoCore
            {...{
              data: trainInfo.trainNum ? trainInfo : undefined,
              openStationACFromEachTrainInfo,
              from: "Train",
              navigate,
            }}
          />
        </View>
      )}
      {isLandscape || (
        <MapsButton
          onPress={() => {
            setInjectJavaScript("");
            navigate("trainMenu", { webview });
          }}
        />
      )}
      {isLandscape && trainInfo.trainNum && (
        <LandscapeBackButton
          onPress={() => {
            LayoutAnimation.easeInEaseOut();
            setTrainInfo({
              trainNum: undefined,
              limited: undefined,
              trainData: undefined,
            });
          }}
        />
      )}
      {mapSwitch == "true" ? (
        <ReloadButton
          onPress={() => Updates.reloadAsync()}
          right={isLandscape && trainInfo.trainNum ? (width / 100) * 40 : 0}
        />
      ) : (
        <NewMenu />
      )}
    </View>
  );
}