import React, { CSSProperties, FC } from "react";
import {
  Platform,
  Text,
  TextStyle,
  useWindowDimensions,
  View,
  ViewStyle,
} from "react-native";
import { StationName } from "./StationName";
import lineColorList from "../../assets/originData/lineColorList";
export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
  const 下枠フレーム: ViewStyle = {
    flex: 1,
    flexDirection: "row",
    alignContent: "center",
    alignItems: "center",
  };

  return (
    <View style={下枠フレーム}>
      <View style={下枠フレーム}>
        {!!preStation && (
          <>
            <BottomSideArrow isMatsuyama={isMatsuyama} children={"◀"} />
            {!!preStation.StationNumber && (
              <BottomStationNumberView
                isMatsuyama={isMatsuyama}
                children={preStation.StationNumber}
              />
            )}
            <StationName
              stringData={preStation}
              ss={{ flex: 1, alignItems: "flex-start" }}
            />
          </>
        )}
      </View>
      <View style={下枠フレーム}>
        {!!nexStation && (
          <>
            <StationName
              stringData={nexStation}
              ss={{ flex: 1, alignItems: "flex-end" }}
            />
            {!!nexStation.StationNumber && (
              <BottomStationNumberView
                isMatsuyama={isMatsuyama}
                children={nexStation.StationNumber}
              />
            )}
            <BottomSideArrow isMatsuyama={isMatsuyama} children={"▶"} />
          </>
        )}
      </View>
    </View>
  );
};

type FCimport = {
  isMatsuyama: boolean;
  children: string;
};
const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
  const 下枠左右マーク: TextStyle = {
    fontWeight: "bold",
    fontSize: parseInt("20%"),
    color: "white",
    paddingHorizontal: 5,
    textAlignVertical: "center",
  };
  return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
};

const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
  const { width } = useWindowDimensions();
  const lineID = children.slice(0, 1);
  const lineName = children.slice(1);
  const 下枠駅ナンバー: ViewStyle = {
    alignContent: "center",
    alignItems: "center",
    width: width * 0.08,
    height: width * 0.08,
    margin: width * 0.01,
    backgroundColor: "white",
    borderWidth: parseInt("3%"),
    borderRadius: parseInt("100%"),
  };
  const 下枠駅ナンバーB: ViewStyle = {
    alignContent: "center",
    alignItems: "center",
    width: width * 0.07,
    height: width * 0.07,
    margin: width * 0.02,
    backgroundColor: "white",
    borderWidth: parseInt("3%"),
    borderRadius: parseInt("100%"),
  };
  return (
    <View
      style={{
        ...(isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー),
        borderColor: lineColorList[lineID],
      }}
    >
      <View style={{ flex: 1 }} />
      <Text
        style={{
          fontSize: parseInt(Platform.OS === "ios" ? "8%" : "10%"),
          color: "black",
          textAlign: "center",
          fontWeight: "bold",
        }}
      >
        {lineID + "\n" + lineName}
      </Text>
      <View style={{ flex: 1 }} />
    </View>
  );
};
