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

import { AS, ASCore } from "../storageControl";
import { news } from "../config/newsUpdate";
import { getStationList, lineList } from "../lib/getStationList";
import { injectJavascriptData } from "../lib/webViewInjectjavascript";
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 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 { setInjectJavaScript, mapsStationData } = useTrainMenu();

  //画面表示関連
  const [iconSetting, setIconSetting] = useState(undefined);
  const [mapSwitch, setMapSwitch] = useState(undefined);
  const [stationMenu, setStationMenu] = useState(undefined);
  const [LoadError, setLoadError] = useState(false);

  //列車情報表示関連
  const [trainInfo, setTrainInfo] = useState({
    trainNum: undefined,
    limited: undefined,
    trainData: undefined,
  });

  //駅情報画面用
  const [originalStationList, setOriginalStationList] = useState();
  const [trainMenu, setTrainMenu] = useState("true");
  useEffect(() => getStationList().then(setOriginalStationList), []);

  //地図表示テキスト
  const injectJavascript = injectJavascriptData(
    mapSwitch,
    iconSetting,
    stationMenu,
    trainMenu
  );

  useEffect(() => {
    //ニュース表示
    AS.getItem("status")
      .then((d) => {
        if (d != news) navigate("news");
      })
      .catch(() => navigate("news"));
  }, []);

  useEffect(() => {
    //列車アイコンスイッチ
    ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true });
    //地図スイッチ
    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true });
    //駅メニュースイッチ
    ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
    //列車メニュースイッチ
    ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true });
  }, []);

  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,
        originalStationList: originalStationList,
        navigate: navigate,
        goTo: "Apps",
        useShow: () => SheetManager.show("StationDetailView", { payload }),
        onExit: () => SheetManager.hide("StationDetailView"),
      };
      SheetManager.show("StationDetailView", { payload });
    } else {
      SheetManager.hide("StationDetailView");
    }
  };
  return (
    <View
      style={{
        height: "100%",
        paddingTop: top,
        flexDirection: isLandscape ? "row" : "column",
      }}
      onLayout={handleLayout}
    >
      {!trainInfo.trainNum && isLandscape ? (
        <TrainMenu
          webview={webview}
          stationData={mapsStationData}
          navigation={{ navigate: null }}
          style={{
            width: (width / 100) * 40,
            height: "100%",
            flexDirection: "column-reverse",
          }}
        />
      ) : null}
      {/* {Status} */}
      <AppsWebView
        originalStationList={originalStationList}
        {...{
          setLoadError,
          setTrainInfo,
          openStationACFromEachTrainInfo,
          injectJavascript,
        }}
      />
      {isLandscape && trainInfo.trainNum && (
        <View
          style={{
            width: (width / 100) * 40,
            height: height,
            flexDirection: "column",
          }}
        >
          <EachTrainInfoCore
            {...{
              data: trainInfo.trainNum ? trainInfo : undefined,
              originalStationList,
              openStationACFromEachTrainInfo,
              from: "Train",
              setTrainInfo,
              navigate,
            }}
          />
        </View>
      )}
      {isLandscape || (
        <MapsButton
          onPress={() => {
            setInjectJavaScript("");
            navigate("trainMenu", { webview });
          }}
          mapSwitch={mapSwitch == "true" ? "flex" : "none"}
        />
      )}
      {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}
          LoadError={LoadError}
        />
      ) : (
        <NewMenu LoadError={LoadError} />
      )}
    </View>
  );
}
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>
  );
};
const MapsButton = ({ onPress, mapSwitch }) => {
  const styles = {
    touch: {
      position: "absolute",
      top,
      left: 10,
      width: 50,
      height: 50,
      backgroundColor: "#0099CC",
      borderColor: "white",
      borderStyle: "solid",
      borderWidth: 1,
      borderRadius: 50,
      alignContent: "center",
      alignSelf: "center",
      alignItems: "center",
      display: mapSwitch,
    },
    text: {
      textAlign: "center",
      width: "auto",
      height: "auto",
      textAlignVertical: "center",
      fontWeight: "bold",
      color: "white",
      fontSize: 20,
    },
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles.touch}>
      <View style={{ flex: 1 }} />
      <Text style={styles.text}>≡</Text>
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};

const LandscapeBackButton = ({ onPress }) => {
  const styles = {
    touch: {
      position: "absolute",
      left: 10,
      width: 50,
      height: 50,
      backgroundColor: "#0099CC",
      borderColor: "white",
      borderStyle: "solid",
      borderWidth: 1,
      borderRadius: 50,
      alignContent: "center",
      alignSelf: "center",
      alignItems: "center",
      display: "flex",
    },
    text: {
      textAlign: "center",
      width: "auto",
      height: "auto",
      textAlignVertical: "center",
      fontWeight: "bold",
      color: "white",
    },
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles.touch}>
      <View style={{ flex: 1 }} />
      <Ionicons name="arrow-back" color="white" size={30} />
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};

const ReloadButton = ({ onPress, mapSwitch, LoadError = false, right }) => {
  const styles = {
    touch: {
      position: "absolute",
      top,
      right: 10 + right,
      width: 50,
      height: 50,
      backgroundColor: LoadError ? "red" : "#0099CC",
      borderColor: "white",
      borderStyle: "solid",
      borderWidth: 1,
      borderRadius: 50,
      alignContent: "center",
      alignSelf: "center",
      alignItems: "center",
      display: mapSwitch,
    },
    text: {
      textAlign: "center",
      width: "auto",
      height: "auto",
      textAlignVertical: "center",
      fontWeight: "bold",
      color: "white",
    },
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles.touch}>
      <View style={{ flex: 1 }} />
      <Ionicons name="reload" color="white" size={30} />
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};