import React from "react";
import { Text, View } from "react-native";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import lineColorList from "../../assets/originData/lineColorList";

export const StationNumberMaker = (props) => {
  const { currentStation, isMatsuyama } = props;
  const getTop = (array: number[], index: number) => {
    if (array.length == 1) return 20;
    else if (index == 0) return 5;
    else if (index == 1) return 35;
    else return 20;
  };
  return currentStation
    .filter((d) => (d.StationNumber ? true : false))
    .map((d, index, array) => {
      const lineID = d.StationNumber.slice(0, 1);
      const lineName = d.StationNumber.slice(1);
      return (
        <View
          style={{
            position: "absolute",
            alignContent: "center",
            alignItems: "center",
            top: `${getTop(array, index)}%`,
            right: "10%",
            width: wp("10%"),
            height: wp("10%"),
            borderColor: lineColorList[lineID],
            backgroundColor: "white",
            borderWidth: parseInt("3%"),
            borderRadius: parseInt("100%"),
          }}
          key={array[index].StationNumber}
        >
          <View style={{ flex: 1 }} />
          <Text
            style={{
              fontSize: parseInt("13%"),
              margin: 0,
              padding: 0,
              textAlign: "center",
              color:  "black",
              fontWeight: "bold",
            }}
          >
            {lineID + "\n" + lineName}
          </Text>
          <View style={{ flex: 1 }} />
        </View>
      );
    });
};