import React, { useEffect, useState } from "react";
import Icon from "react-native-vector-icons/Entypo";
import { View, Text, TouchableOpacity, LayoutAnimation } from "react-native";
import lineColorList from "../../../assets/originData/lineColorList";
import Ionicons from "react-native-vector-icons/Ionicons";
import { AS } from "../../../storageControl";

export const FavoriteSettingsItem = ({ currentStation }) => {
  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 (
    <View style={{ flexDirection: "row", backgroundColor: "white" }}>
      <View
        style={{
          width: 35,
          position: "relative",
          marginHorizontal: 10,
          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 }} />
      </View>
      <View
        style={{
          alignContent: "center",
          alignItems: "center",
          alignSelf: "center",
        }}
      >
        <Ionicons name={"reorder-two"} size={20} style={{ marginHorizontal: 10 }} />
      </View>
    </View>
  );
};