import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import { View, Platform } from "react-native";
import { useKeepAwake } from "expo-keep-awake";
import Constants from "expo-constants";
import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
import { FixedStation } from "./FixedPositionBox/FixedStationBox";
import { useState } from "react";
import { useTrainMenu } from "@/stateBox/useTrainMenu";

export const FixedPositionBox = () => {
  const { mapSwitch } = useTrainMenu();
  const { fixedPosition } = useCurrentTrain();
  const [displaySize, setDisplaySize] = useState(mapSwitch == "true" ? 76 : 80);

  useKeepAwake();
  return (
    <View
      style={{
        position: "absolute",
        top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
        borderRadius: 5,
        zIndex: 1500,
        width: "100%",
        height: displaySize,
        flexDirection: "row",
      }}
      pointerEvents="box-none"
    >
      {fixedPosition.type === "station" && (
        <FixedStation
          stationID={fixedPosition.value}
          displaySize={displaySize}
          setDisplaySize={setDisplaySize}
        />
      )}
      {fixedPosition.type === "train" && (
        <FixedTrain
          trainID={fixedPosition.value}
          displaySize={displaySize}
          setDisplaySize={setDisplaySize}
        />
      )}
    </View>
  );
};