import React, { FC } from "react";
import { Text, View } from "react-native";
import { useWindowDimensions } from "react-native";
import lineColorList from "@/assets/originData/lineColorList";
import { StationProps } from "@/lib/CommonTypes";

type props = {
  currentStation: StationProps[];
  useEach?: boolean;
  singleSize?: number;
};
export const StationNumberMaker: FC<props> = (props) => {
  const { currentStation, useEach = false, singleSize } = props;
  const { width } = useWindowDimensions();
  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={{
            alignContent: "center",
            alignItems: "center",
            borderColor: lineColorList[lineID],
            backgroundColor: "white",
            ...(useEach ? {
            width: singleSize,
            height: singleSize,
            borderWidth: parseInt("1%"),
            borderRadius: parseInt("100%"),
          } : {
            width: (width / 100) * 10,
            height: (width / 100) * 10,
            borderWidth: parseInt("3%"),
            borderRadius: parseInt("100%"),
            position: "absolute",
            top: `${getTop(array, index)}%`,
            right: "10%"
          })
          }}
          key={array[index].StationNumber}
        >
          <View style={{ flex: 1 }} />
          <Text
            style={{
              margin: 0,
              padding: 0,
              textAlign: "center",
              color: "black",
              fontWeight: "bold",
              ...(useEach ? {

              fontSize: 6,//singleSize * 0.03,
              }:{
              fontSize: parseInt("13%"),
              })
            }}
          >
            {lineID + "\n" + lineName}
          </Text>
          <View style={{ flex: 1 }} />
        </View>
      );
    })}</>
};