import React, { CSSProperties, FC } from "react";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import { Platform, Text, TextStyle, View, ViewStyle } from "react-native";
import { StationName } from "./StationName";
import lineColorList from "../../assets/originData/lineColorList";
export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
  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 }) => {
  return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
};

const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
  const lineID = children.slice(0, 1);
  const lineName = children.slice(1);
  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>
  );
};

const 下枠フレーム: ViewStyle = {
  flex: 1,
  flexDirection: "row",
  alignContent: "center",
  alignItems: "center",
};
const 下枠左右マーク: TextStyle = {
  fontWeight: "bold",
  fontSize: parseInt("20%"),
  color: "white",
  paddingHorizontal: 5,
  textAlignVertical: "center",
};
const 下枠駅ナンバー: ViewStyle = {
  alignContent: "center",
  alignItems: "center",
  width: wp("8%"),
  height: wp("8%"),
  margin: wp("1%"),
  backgroundColor: "white",
  borderWidth: parseInt("3%"),
  borderRadius: parseInt("100%"),
};
const 下枠駅ナンバーB: ViewStyle = {
  alignContent: "center",
  alignItems: "center",
  width: wp("7%"),
  height: wp("7%"),
  margin: wp("2%"),
  backgroundColor: "white",
  borderWidth: parseInt("3%"),
  borderRadius: parseInt("100%"),
};