import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import lineColorList from "../../assets/originData/lineColorList";

export const FavoriteListItem = ({ currentStation, children, onPress }) => {
  const lineIDs = [];
  const EachIDs = [];
  currentStation.forEach((d) => {
    if (!d.StationNumber) return;
    const textArray = d.StationNumber.split("");
    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
  });

  return (
    <TouchableOpacity
      style={{ flexDirection: "row", backgroundColor: "white" }}
      onPress={onPress}
    >
      <View
        style={{
          width: 35,
          position: "relative",
          marginHorizontal: 15,
          flexDirection: "row",
          height: "101%",
        }}
      >
        {lineIDs.map((lineID, index) => (
          <View
            style={{
              backgroundColor: lineColorList[lineID],
              flex: 1,
            }}
            key={lineID}
          >
            <View style={{ flex: 1 }} />
            <Text
              style={{
                color: "white",
                textAlign: "center",
                fontSize: 12,
                fontWeight: "bold",
              }}
            >
              {lineIDs[index]}
              {"\n"}
              {EachIDs[index]}
            </Text>
            <View style={{ flex: 1 }} />
          </View>
        ))}
      </View>

      <View
        style={{
          padding: 8,
          flexDirection: "row",
          borderBottomWidth: 1,
          borderBottomColor: "#f0f0f0",
          flex: 1,
          alignContent: "center",
          alignItems: "center",
        }}
      >
        <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
        <View style={{ flex: 1 }} />
        {children}
      </View>
    </TouchableOpacity>
  );
};