import React, { useState, useEffect } from "react";
import { View, TouchableOpacity, useWindowDimensions } from "react-native";
import { StateBox } from "./StateBox";
import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
import { getStationList2 } from "../../../lib/getStationList2";
import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
import { SheetManager } from "react-native-actions-sheet";

export const TrainDataView = ({
  currentTrainData,
  currentPosition,
  nearTrainIDList,
  openTrainInfo,
  mode = 0,
  navigate,
}) => {
  const { width, height } = useWindowDimensions();
  const { isLandscape } = useDeviceOrientationChange();
  const { webview, getCurrentTrain } = useCurrentTrain();
  const [mapsStationData, setMapsStationData] = useState(undefined);
  useEffect(() => {
    getStationList2().then(setMapsStationData);
  }, []);
  const onLine = !!currentPosition?.toString().length;
  return (
    <View
      style={{
        flexDirection: "row",
        //minHeight: 200,
        //height: heightPercentageToDP("20%"),
        width: isLandscape ? (width / 100) * 40 : width,
        flex: 1,
      }}
    >
      <TouchableOpacity
        style={{ flex: 1, flexDirection: "row" }}
        disabled={!onLine}
        onPress={() => {
          const test = [];
          Object.keys(mapsStationData).forEach((d) => {
            mapsStationData[d].forEach((x) => {
              if (x.StationNumber == currentPosition[0])
                test.push({ line: d, station: x });
            });
            if (currentPosition[0] == "M12") {
              test.push({
                line: "seto",
                station: { Station_JP: "児島", MyStation: "0" },
              });
            }
          });
          if (!test.length) return;
          webview.current?.injectJavaScript(
            `MoveDisplayStation('${test[0].line}_${test[0].station.MyStation}_${test[0].station.Station_JP}');setStrings();`
          );
          navigate("Apps");
          SheetManager.hide("EachTrainInfo");
        }}
      >
        <StateBox
          mode={mode}
          title={`現在地 ${currentPosition?.toString()}${onLine ? "▶️" : ""}`}
          text={
            currentTrainData?.Pos.match("～")
              ? `${
                  currentTrainData?.Pos.replace("（下り）", "")
                    .replace("（上り）", "")
                    .split("～")[0]
                }～${
                  currentTrainData?.Pos.replace("（下り）", "")
                    .replace("（上り）", "")
                    .split("～")[1]
                }`
              : currentTrainData?.Pos
          }
          style={
            onLine
              ? { borderWidth: 1, borderColor: "red", borderStyle: "solid" }
              : {}
          }
        />
      </TouchableOpacity>

      <View style={{ flex: 1, flexDirection: mode == 2 ? "row" : "column" }}>
        <View style={{ flex: 1, flexDirection: "row" }}>
          <StateBox
            mode={mode}
            title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
            text={`${currentTrainData?.delay}${
              isNaN(currentTrainData?.delay) ? "" : "分"
            }`}
          />
        </View>
        <TouchableOpacity
          style={{ flex: 1, flexDirection: "row" }}
          disabled={nearTrainIDList.length == 0}
          onPress={() => {
            if (nearTrainIDList.length == 0) return;
            openTrainInfo(nearTrainIDList[0]);
          }}
        >
          {nearTrainIDList.length == 0 ? (
            <StateBox mode={mode} title="列番" text={currentTrainData?.num} />
          ) : (
            <StateBox
              mode={mode}
              title="増解結相手を表示▶️"
              text={`${nearTrainIDList}`}
              style={{
                borderWidth: 1,
                borderColor: "red",
                borderStyle: "solid",
              }}
            />
          )}
        </TouchableOpacity>
      </View>
    </View>
  );
};