import { trainPosition } from "@/lib/trainPositionTextArray";
import React, { FC } from "react";
import { View, Text, TextStyle, ViewStyle } from "react-native";

type stateBox = {
  currentTrainData: any;
  platformNumber: any;
  title: string;
  style?: ViewStyle;
  mode?: number;
  platformDescription: string;
  lineNumber: string;
};
export const PositionBox: FC<stateBox> = (props) => {
  const {
    currentTrainData,
    platformNumber,
    title,
    style,
    mode,
    platformDescription,
    lineNumber,
  } = props;
  let firstText = "";
  let secondText = "";
  let marginText = "";
  let externalText = "";
  const { isBetween, Pos: PosData } = trainPosition(currentTrainData);
  if (isBetween === true) {
    const { from, to } = PosData;
    firstText = from;
    secondText = to;
    marginText = mode == 2 ? "→" : "↓";
  } else {
    const { Pos } = PosData;
    if (Pos !== "") {
      firstText = Pos;
      if (platformNumber) {
        secondText = `${platformNumber}番乗り場`;
        if (lineNumber) {
          externalText = `${lineNumber}番線`;
        }
      } else if (lineNumber) {
        secondText = `${lineNumber}番線`;
      }
    }
  }
  return (
    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
      <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
      <View style={{ flex: 1 }} />
      <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
        {firstText && (
          <Text style={mode == 2 ? boxTextStyle2 : (isBetween ?  boxTextStyle : boxTextStyleBig)}>
            {firstText}
          </Text>
        )}
        {marginText && (
          <Text style={{ color: "#0099CC", textAlign: "right" }}>
            {marginText}
          </Text>
        )}
        {secondText && (
          <Text style={mode == 2 ? boxTextStyle2 :(isBetween ?  boxTextStyle : boxTextStyleMini)}>
            {secondText}
          </Text>
        )}
      </View>
      {(platformDescription || externalText) && (
        <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
          <Text
            style={{
              ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
              fontSize: 10,
            }}
          >
            {" " + externalText}
            {" " + platformDescription}
          </Text>
        </View>
      )}
    </View>
  );
};
const boxStyle: ViewStyle = {
  flex: 1,
  backgroundColor: "white",
  borderRadius: 10,
  padding: 10,
  margin: 10,
};
const boxStyle2: ViewStyle = {
  flex: 1,
  backgroundColor: "white",
  borderRadius: 10,
  padding: 5,
  margin: 5,
};
const boxTextStyle2: TextStyle = {
  fontSize: 18,
  color: "#0099CC",
  textAlign: "right",
};
const boxTextStyleBig: TextStyle = {
  fontSize: 28,
  color: "#0099CC",
  textAlign: "right",
};


const boxTextStyleMini: TextStyle = {
  fontSize: 16,
  color: "#0099CC",
  textAlign: "right",
};


const boxTextStyle: TextStyle = {
  fontSize: 25,
  color: "#0099CC",
  textAlign: "right",
};