import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  useWindowDimensions,
} from "react-native";
import { StateBox } from "./StateBox";
import {
  heightPercentageToDP,
  widthPercentageToDP,
} from "react-native-responsive-screen";

export const TrainDataView = ({
  currentTrainData,
  currentPosition,
  nearTrainIDList,
  openTrainInfo,
  mode = 0,
}) => {
  const [isLandscape, setIsLandscape] = useState(false);
  const { width, height } = useWindowDimensions();
  useEffect(() => {
    if (height / width > 1.5) {
      setIsLandscape(false);
    }
    if (height / width < 1.5) {
      setIsLandscape(true);
    }
  }, [width, height]);

  return (
    <View
      style={{
        flexDirection: "row",
        //minHeight: 200,
        //height: heightPercentageToDP("20%"),
        width: isLandscape ? (width / 100) * 40 : width,
        flex: 1,
      }}
    >
      <StateBox
        mode={mode}
        title={`現在地 ${currentPosition.toString()}`}
        text={
          currentTrainData?.Pos.match("～")
            ? `${
                currentTrainData?.Pos.replace("（下り）", "")
                  .replace("（上り）", "")
                  .split("～")[0]
              }～${
                currentTrainData?.Pos.replace("（下り）", "")
                  .replace("（上り）", "")
                  .split("～")[1]
              }`
            : currentTrainData?.Pos
        }
      />
      <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>
  );
};